动画系列

基本动画

 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();});

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

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页