Web Development with jQuery®

(Elliott) #1

Fading Elements (^) ❘ 235
background: yellow;
border-radius: 4px;
padding: 5px;
margin: 0 0 10px 0 ;
}
The following script demonstrates the fadeIn(), fadeOut(), and fadeToggle() methods.
$(document).ready(
function()
{
var animating = false;
$('input#exampleAnimationShow').click(
function(event)
{
event.preventDefault();
if (!animating)
{
animating = true;
var easing = $('select#exampleAnimationEasing').val();
var duration = parseInt($('input#exampleAnimationDuration').val());
$('div#exampleDialog').fadeIn(
duration,
easing,
function()
{
animating = false;
}
);
}
}
);
$('input#exampleAnimationHide').click(
function(event)
{
event.preventDefault();
if (!animating)
{
animating = true;
var easing = $('select#exampleAnimationEasing').val();
var duration = parseInt($('input#exampleAnimationDuration').val());
$('div#exampleDialog').fadeOut(
duration,
easing,
function()
http://www.it-ebooks.info

Free download pdf