jq动画 | 易学教程

1.show动画

（1）show（speed，callback）展示

 $("button:eq(0)").click(function(){   $("div").show(10000,fn)   })   function fn(){   console.log('动画结束了')   }

（2）hide（speed，callback）隐藏

 $("button:eq(0)").click(function(){   $("div").hide(10000,fn)    })    function fn(){       console.log('动画结束了')     }

（3）toggle（speed，callback）切换

$("button:eq(0)").click(function(){   $("div").toggle(10000,fn)    })    function fn(){       console.log('动画结束了')     }

2.slide 滑入滑出

（1）slideDown

 $("button:eq(0)").click(function(){   $("div").slideDown(10000,fn)    })    function fn(){       console.log('动画结束了')     }

（2）slideUp

 $("button:eq(0)").click(function(){   $("div").slideUp(10000,fn)    })    function fn(){       console.log('动画结束了')     }

（3）slideToggle

 $("button:eq(0)").click(function(){   $("div").slideToggle(10000,fn)    })    function fn(){       console.log('动画结束了')     }

3.fade 淡入淡出

（1）fadeIn

 $("button:eq(0)").click(function(){   $("div").fadeIn(10000,fn)    })    function fn(){       console.log('动画结束了')     }

（2）fadeOut

  $("button:eq(0)").click(function(){   $("div").fadeOut(10000,fn)    })    function fn(){       console.log('动画结束了')     }

（3）fadeToggle

 $("button:eq(0)").click(function(){   $("div").fadeToggle(10000,fn)    })    function fn(){       console.log('动画结束了')     }

4.自定义动画 jq对象.animate(obj,speed,easing,callback)

 $(function(){  $("div:eq(0)").animate({    left:500,    borderRadius: 100 ,  },10000,fn)   $("div:eq(1)").animate({    left:500,    borderRadius: 100 ,  },10000,"linear",fn)     function fn(){      console.log('动画结束了')    }   })

5.动画队列

jq对象.animate(obj,speed,easing,callback)

.animate(obj,speed,easing,callback)

 .animate({    borderRadius:100  },3000,fn)  .animate({   left:300  },3000,fn)      function fn(){      console.log('动画')    }   })

6.stop

（1）stop（）停止当前正在执行的动画，如果元素的动画队列里有后续动画，就执行后续动画了

 $("button:eq(0)").click(function(){    $("div")   .slideDown(2000,"linear")   .slideUp(2000,"linear")  })  $("button:eq(1)").click(function(){    $("div")   .stop()  })

（2）stop（true）清除动画队列 true为清除 false为默认

 $("button:eq(0)").click(function(){    $("div")   .slideDown(2000,"linear")   .slideUp(2000,"linear")  })  $("button:eq(1)").click(function(){    $("div")   .stop(true)  })

（3）stop（false，true）跳转到当前动画的最后效果

$("button:eq(0)").click(function(){    $("div")   .slideDown(2000,"linear")   .slideUp(2000,"linear")  })  $("button:eq(1)").click(function(){    $("div")   .stop(false,true)  })

来源：博客园

作者：宅到深夜

链接：https://www.cnblogs.com/zhaodz/p/11623571.html

标签

动画

按钮

callback

linear