同步動畫

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; 取消所有動畫