jQuery中的animate()基本用法

 $('div').click(function(){
       $(this).animate({
         width:200,
         height:200
       },1000,'linear',function(){
         $(this).animate({borderRadius:100},1000,'swing')
       })
     })

animate()方法接收几个参数，第一个参数是包含属性和值的对象，它规定的将要实现的效果的相关样式，注意涉及到距离不必加px，必须是数字的，其它非数字的属性值是不行的，比如说不能设置颜色；
第二个参数是持续时间，默认是400ms；
第三个参数是运动参数，jQuery提供两种：swing（默认）和linear；
第四个参数是运动结束后回调函数。

上面的代码还可以用链式操作来实现：

$('div').click(function(){
       
       $(this).animate({width:200,height:200},1000,'linear')
       .animate({borderRadius:100},1000,'swing')
       
})

这和上面的代码是等价的。

• stop() 只能停止当前运动阶段的运动；
• stop(true) 停止所有的运动；
• stop(true,true) 停止所有的运动并且让当前运动达到最终状态；
• finish() 停止当前所有运动并且让运动的各个阶段都达到最终形态；
• delay() 让不同阶段之间的有延迟；

$('#div1').click(function(){
       
       $(this).animate({width:200,height:200},1000,'linear')
       .delay(2000)
       .animate({borderRadius:100},1000,'swing')
       
       $('#div2').click(function(){
         $('#div1').finish()
         
         
       })
       
})