同步动画

animate(参数对象,time,回调函数)

同时改变多个样式。

$(":button").click(function(){
         $("div").animate({        'width':"300px",        'height':"300px",        'opacity':0.5,        'font-size':'50px'    });});

添加速度和回调函数

$(":button").click(function(){
         $("div").animate({        'width':"300px",        'height':"300px",        'opacity':0.5,        'font-size':'50px'    },200,function(){
             alert("动画完成");    });});

移动动画。需要将div的样式设置成position:absolte,然后在改变left和top的值即可：

$(":button").click(function(){
         $("div").animate({            left:'100px',            top:'100px'    });});

位置的自增自减。位置的改变可以自增自减（+=，-=）

$(":button").click(function(){
         $("div").animate({            left:'+=100px',            top:'-=100px'    });});

运动模式

有两种速度

- swing 缓动（先快后慢） - linear 匀速

$(".a").animate({    left:"500px"},2000,'swing');$(".b").animate({    left:"500px"},2000,'linear');

列队动画

回调函数

嵌套调用回调函数，可以实现队列动画，但是比较繁琐

$(":input").click(function(){
         $("div").animate({width:"300px"},function(){
             $("div").animate({height:"300px"},function(){
                 $("div").animate({height:"300px"},function(){
                     $("div").animate({fontSize:"50px"});            })        });    });     });

连缀或顺序排列

链式调用

jQuery支持链式调用。因此可以链式的改变多个样式

$(":input").click(function(){
         $("div").animate({width:"300px"})            .animate({height:"300px"})            .animate({fontSize:"50px"});});

顺序排列

将动画分解，并列的依次调用

$(":input").click(function(){
         $("div").animate({width:"300px"});    $("div").animate({height:"300px"});    $("div").animate({fontSize:"50px"});});

PS

以上方法对于单个元素的样式可以实现列队动画。但是如果同时控制几个元素时，不同的元素同时开始执行。但是执行时是按照队列依次执行自身的动画，如果需要不同的元素之间队列执行，就必须嵌套回调函数

$(":input").click(function(){
         $(".a").animate({width:"300px"});    $(".a").animate({height:"300px"});    $(".a").animate({fontSize:"50px"});    $(".b").animate({width:"300px"});    $(".b").animate({height:"300px"});    $(".b").animate({fontSize:"50px"});});

queue()

如果在一连串的动画后调用改变样式的函数。那么会先改变css样式，后执行动画。

$(":input").click(function(){
         $(".a").animate({width:"300px"}).animate({height:"300px"}).css("background-color","skyblue"    );});

解决的方法是使用queue函数，该函数会让动画先执行：

$(":input").click(function(){
         $(".a").animate({width:"300px"}).animate({height:"300px"}).queue(function(){
             $(".a").css("background-color","skyblue"   );    });});

但是，这是如果在queue后再接着调用其他动画时会失效，解决方法是在queue函数的末尾调用next(),同时在queue的匿名函数入口传入next

queue(function(next){… next()});

$(":input").click(function(){
         $(".a").animate({width:"300px"});    $(".a").animate({height:"300px"}).queue(function(next){
             $(".a").css("background-color","skyblue");        next();    }).animate({width:"800px"});});

较老的版本使用dequeue函数达到同样的效果：

$(":input").click(function(){
         $(".a").animate({width:"300px"});    $(".a").animate({height:"300px"}).queue(function(next){
             $(".a").css("background-color","skyblue");        $(this).dequeue();    }).animate({width:"800px"});});

queue还可以得到当前动画的长度

clearQueue()

清理之后没有开始的动画，并且，clearQueue() 方法移除任何排队的函数。

$(":input").click(function(){
         $(".a").animate({width:"300px"},2000);    $(".a").animate({height:"300px"},2000);    $(".a").animate({fontSize:"50px"},2000);    $(".a").queue(function(next){
             $(".a").css("background-color","skyblue");        $(this).dequeue();    }).animate({width:"800px"});});$(":input:eq(1)").click(function(){
         $(".a").clearQueue();});

stop()

stop(clearQueue,gotoEnd)

- clearQueue 停止，并清空后面未执行完的动画。默认为 false (true/false) - gotoEnd 停止后，当前动画执行完毕的位置，默认为 false （true/false)

默认地，如果有列队动画，stop停止第一个列队动画，而继续执行后面的动画。

$(":button:eq(0)").click(function(){
         $(".a").animate({        left:"500px"    },1000);    $(".a").animate({        top:"500px"    },1000);    $(".a").animate({        width:"500px"    },1000);});$(":button:eq(1)").click(function(){
         $(".a").stop(true,true);});

delay()

事件延迟一定的时间

delay(time)

$(":button:eq(0)").click(function(){
         $(".a").animate({        left:"500px"    });    $(".a").animate({        top:"500px"    });    $(".a").delay(1000);    $(".a").animate({        width:"500px"    });});

animated

之前说过的一个过滤器，可以选择正在执行动画的元素

一个永不停止的动画：

$(".a").slideToggle(function(){
         $(".a").slideToggle(arguments.callee);});

使用过滤器：

$(":button").click(function(){
         $(":animated").css("backgroundColor","blue");});

动画的全局属性

全局的动画属性：

- .fx.interval动画执行的帧数(num)−.fx.off 关闭动画（true/false）

$.fx.interval = 100;   设置帧数为100 ，动画变得卡顿$.fx.off = true; 取消所有动画