jQuery教程-jQuery动画

jQuery提供了一组方法用于为HTML元素制作简单的动画效果。这些动画的方法都是根据实际动画效果来命名的，它们分别是：

• show()
• hide()
• toggle()
• slideDown()
• slideUp()
• slideToggle()
• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()
• animate()

下面是关于这些动画方法的实际例子，你可以点击相应的按钮来测试一下效果。

show()

show()方法用于显示隐藏的元素。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

show()方法的语法为：

show([speed,[easing],[fn]])                           
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如显示一张隐藏的图片。

$('#theImg').show();                           
                          

在对元素使用show()方法之前，该元素必须是处于隐藏状态，否则不会有任何效果。要隐藏一个元素可以通过hide()方法或通过CSS样式。

<img id="theDiv" style="display: none" src="..." />                            
                          

show()方法的第一个参数是显示元素的动画速度，可以是三个预置的字符串或一个整数数值。

$('#theImg').show('slow');
$('#theImg').show('normal');
$('#theImg').show('fast');
$('#theImg').show(2000);                            
                          

第3个参数是一个可选的回调函数，它在元素被完全显示后执行。

$('#theImg').show(function(){ alert('shown');} );
$('#theImg').show(2000, function(){ alert('shown');} );                            
                          

hide()

hide()方法用于隐藏元素。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

hide()方法的语法为：

hide([speed,[easing],[fn]])                          
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码隐藏div元素。

$('#theDiv').hide();
$('#theDiv').hide('slow');
$('#theDiv').hide('normal');
$('#theDiv').hide('fast');
$('#theDiv').hide(2000);                            
                          

也可以在元素被完全隐藏之后执行一个回调函数。

$('#theDiv').hide(function(){ alert('shown');} );
$('#theDiv').hide(2000, function(){ alert('shown');} );                            
                          

toggle()

toggle()方法用于切换一个元素的可见性。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

toggle()方法的语法为：

toggle([speed],[easing],[fn])                        
                          

参数：

• speed： 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码切换div元素的可见性：

$('#theDiv').toggle();
$('#theDiv').toggle('slow');
$('#theDiv').toggle('normal');
$('#theDiv').toggle('fast');
$('#theDiv').toggle(2000);                            
                          

也可以在元素的状态被切换之后执行一个回调函数。

$('#theDiv').toggle(function(){ alert('shown');} );
$('#theDiv').toggle(2000, function(){ alert('shown');} );                           
                          

slideDown()

slideDown()方法通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

slideDown()方法的语法为：

slideDown([speed],[easing],[fn])                            
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码使div元素向下滑动显示。

$('#theDiv').slideDown();
$('#theDiv').slideDown('slow');
$('#theDiv').slideDown('normal');
$('#theDiv').slideDown('fast');
$('#theDiv').slideDown(2000);                           
                          

也可以在元素向下滑动显示完成之后执行一个回调函数。

$('#theDiv').slideDown(function(){ alert('done');} );
$('#theDiv').slideDown(2000, function(){ alert('done');} );                            
                          

slideUp()

slideUp()方法通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

slideUp()方法的语法为：

slideUp([speed],[easing],[fn])                            
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码使div元素向上滑动显示。

$('#theDiv').slideUp();
$('#theDiv').slideUp('slow');
$('#theDiv').slideUp('normal');
$('#theDiv').slideUp('fast');
$('#theDiv').slideUp(2000);                           
                          

你也可以在元素向上滑动显示完成之后执行一个回调函数。

$('#theDiv').slideUp(function(){ alert('done');} );
$('#theDiv').slideUp(2000, function(){ alert('done');} );                         
                          

slideToggle()

slideToggle()方法通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

slideToggle()方法的语法为：

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码以滑动的发生切换div元素的可见性。

$('#theDiv').slideToggle();
$('#theDiv').slideToggle('slow');
$('#theDiv').slideToggle('normal');
$('#theDiv').slideToggle('fast');
$('#theDiv').slideToggle(2000);                           
                          

你也可以在元素向上滑动显示完成之后执行一个回调函数。

$('#theDiv').slideToggle(function(){ alert('done');} );
$('#theDiv').slideToggle(2000, function(){ alert('done');} );                       
                          

fadeIn()

fadeIn()方法通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeIn()方法的语法为：

fadeIn([speed],[easing],[fn])                            
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码以淡入的方式显示div元素。

$('#theDiv').fadeIn();
$('#theDiv').fadeIn('slow');
$('#theDiv').fadeIn('normal');
$('#theDiv').fadeIn('fast');
$('#theDiv').fadeIn(2000);                            
                          

你也可以在元素淡入显示完成之后执行一个回调函数。

$('#theDiv').fadeIn(function(){ alert('done');} );
$('#theDiv').fadeIn(2000, function(){ alert('done');} );                            
                          

fadeOut()

fadeOut()方法通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut()方法的语法为：

fadeOut([speed],[easing],[fn])                           
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码以淡出的方式隐藏div元素。

$('#theDiv').fadeOut();
$('#theDiv').fadeOut('slow');
$('#theDiv').fadeOut('normal');
$('#theDiv').fadeOut('fast');
$('#theDiv').fadeOut(2000);                            
                          

你也可以在元素淡出隐藏完成之后执行一个回调函数。

$('#theDiv').fadeOut(function(){ alert('done');} );
$('#theDiv').fadeOut(2000, function(){ alert('done');} );                         
                          

fadeToggle()

fadeToggle()方法通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle()方法的语法为：

fadeToggle([speed],[easing],[fn])                           
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码以淡入淡出的方式显示和隐藏div元素。

$('#theDiv').fadeToggle();
$('#theDiv').fadeToggle('slow');
$('#theDiv').fadeToggle('normal');
$('#theDiv').fadeToggle('fast');
$('#theDiv').fadeToggle(2000);                           
                          

你也可以在元素淡入淡出显示和隐藏完成之后执行一个回调函数。

$('#theDiv').fadeToggle(function(){ alert('done');} );
$('#theDiv').fadeToggle(2000, function(){ alert('done');} );                       
                          

fadeTo()

fadeTo()方法把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle()方法的语法为：

fadeTo([[speed],opacity,[easing],[fn]])                          
                          

参数：

• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• opacity：一个0至1之间表示透明度的数字。
• easing：可选参数，用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如下面的代码以动画的方式将div元素的透明度设置为0.5。

$('#theDiv').fadeTo(0.5);
$('#theDiv').fadeTo('slow', 0.5);
$('#theDiv').fadeTo('normal', 0.5);
$('#theDiv').fadeTo('fast', 0.5);
$('#theDiv').fadeTo(2000, 0.5);                            
                          

你也可以在元素透明动画完成之后执行一个回调函数。

$('#theDiv').fadeTo(0.5, function(){ alert('done');} );
$('#theDiv').fadeTo(2000, 0.5, function(){ alert('done');} );                            
                          

animate()

animate()方法是用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

不是所有的属性都可以被动画，下面列出了一些可以被动画的属性。

• borderWidth
• width
• height
• fontSize
• opacity
• margin
• padding
• bottom
• left
• right
• top
• wordSpacing
• 等等.....

animate()方法的语法为：

animate(params,[speed],[easing],[fn])                          
                          

参数：

• params：一组包含作为动画属性和终值的样式属性和及其值的集合。
• speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)。
• easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。
• fn：在动画完成时执行的函数，每个元素执行一次。

例如：

$('#theDiv').animate({"height" : 300}, 'slow');
$('#theDiv').animate({"width"  : 200}, 'slow');                            
                          

你可以一次动画多个属性：

$('#theDiv').animate({"height" : 250, width:250 }, 'slow');                            
                          

你还可以在动画结束之后执行一个回调函数。

$('#theDiv').animate({"width"  : 200}, 'slow',
    function(){ alert('done'); 
});                            
                          

在animate()方法中你叶可以执行toggle动画。例如，如果你对width属性执行toggle操作，那么宽度首先会变为0，然后宽度在变回原来的值。

$('#theDiv').animate({"width"  : 'toggle'}, 'slow' );                            
                          

这里使用toggle操作对于透明度的切换是非常不错的效果。但是对于其它一些属性，也许会产生一些意想不到的问题。

相关阅读

• jQuery教程-jQuery的常用事件
• jQuery教程-jQuery事件模型
• jQuery教程-jQuery事件处理和事件委派