动画系列

基本动画

 hide：

隐藏显示的元素

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

​*$("p").hide("fast","linear",function (){
         console.log("动画完成");
         })​

show：

显示隐藏的元素

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，不写的话，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

​*$("p").show("fast","linear",function (){
         console.log("动画完成");
         })​

slideDown：

通过高度变化（向下增大）来动态地显示所有匹配的元素

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

$("p").slideDown("fast",function(){
   console.log("动画完成")
 });

slideUp:

通过高度变化（向上减小）来动态地显示所有匹配的元素

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

​​$("p").slideUp("fast",function(){
   console.log("动画完成")
 });​​

slideToggle：

通过高度变化来切换所有匹配元素的可见性

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

​​​​$("p").slideToggle("fast",function(){
   console.log("动画完成")
 });​​​​

fadeIn：

通过不透明度的变化来实现所有匹配元素的淡入效果

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

("p").fadeIn("fast",function(){
   console.log("动画完成");
 });

fadeOut:

通过不透明度的变化来实现所有匹配元素的淡出效果

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值  

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

​​("p").fadeOut("fast",function(){
   console.log("动画完成");
 });​​

fadeTo:

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值

           2、opacity ：一个0至1之间表示透明度的数字 

           3、easing（swing、linear）：用来指定切换效果，默认为swing

           4、fn：在动画完成时执行的函数，每个元素执行一次

示例代码:

$("p").fadeTo("fast", 0.25, function(){
   console.log("动画完成")
 });

fadetoggle:

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

参数：1、speed（slow、normal、fast）：用来表示动画时长的毫秒数值

           2、easing（swing、linear）：用来指定切换效果，默认为swing

           3、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

$("p").fadeToggle("fast",function(){
  console.log("动画完成")
 });

animate:

用于创建自定义动画的函数

参数：1、params：一组包含作为动画属性和终值的样式属性和及其值的集合

           2、speed（slow、normal、fast）：用来表示动画时长的毫秒数值

           3、easing（swing、linear）：用来指定切换效果，默认为swing

           4、fn：在动画完成时执行的函数，每个元素执行一次

示例代码：

用500毫秒将段落移动到left为50的地方，并且完全清晰的显示出来

$("p").animate({
   left: 50, opacity: 'show'
 }, 500);

stop:

停止所有在指定元素上正在运行的动画，如果队列中有等待执行的动画，他们将被马上执行

参数

1、如果设置成true，则清空队列，可以立即结束动画。

2、如果设置成true，则完成队列，可以立即完成动画。

示例代码：

// 开始动画
$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});

delay：

设置一个延时来推迟执行队列中之后的项目

参数

1、延时时间，单位：毫秒

2、队列名词，默认是fx，动画队列。

示例代码：

$('#foo').delay(800)；

finish:

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

示例代码：

$("#complete").click(function(){  $("div").finish();});

注：本文中的示例代码都是部分代码