jQuery animate隊(duì)列是jQuery中非常常用的一種動(dòng)畫(huà)方式，它能夠讓對(duì)象以流暢的方式移動(dòng)，而不是瞬間移動(dòng)。animate() 方法允許我們創(chuàng)建基于隊(duì)列的動(dòng)畫(huà)。它不只是在初始值和終止值之間進(jìn)行平滑的運(yùn)動(dòng)，還可以隊(duì)列化多個(gè)動(dòng)畫(huà)，使得它們按照指定的順序依次執(zhí)行。

//基本的 jQuery 動(dòng)畫(huà)語(yǔ)法
$(selector).animate({params},speed,callback);
// 示例代碼
$("button").click(function(){
$("div").animate({left: '250px'}, 2000);
$("div").animate({fontSize: '4em'}, 2000);
$("div").animate({height: '+=100px'}, 2000);
});

上述示例代碼中，三個(gè)動(dòng)畫(huà)將依次執(zhí)行，在第一個(gè)動(dòng)畫(huà)執(zhí)行完畢后才開(kāi)始第二個(gè)動(dòng)畫(huà)，以此類推。當(dāng)需要在同一個(gè)div元素上執(zhí)行多個(gè)動(dòng)畫(huà)，且所有動(dòng)畫(huà)都需要在同一時(shí)間開(kāi)始，我們需要使用隊(duì)列技術(shù)。

//將隊(duì)列中的動(dòng)畫(huà)清空，并停止當(dāng)前正在進(jìn)行的動(dòng)畫(huà)
$("div").stop();
//將一個(gè)新的動(dòng)畫(huà)添加到隊(duì)列中
$("div").animate({left: '250px'}, 2000).queue(function(){
$("div").addClass("blue");
$(this).dequeue(); //執(zhí)行下一個(gè)動(dòng)畫(huà)
});
$("div").animate({fontSize: '4em'}, 2000);
//創(chuàng)建一個(gè)新的隊(duì)列
$("button").click(function(){
var newQueue = $({}); //在空jQuery對(duì)象上創(chuàng)建隊(duì)列
newQueue.queue(function(){
$("div").animate({left: '250px'}, 2000);
$(this).dequeue(); //執(zhí)行下一個(gè)動(dòng)畫(huà)
});
newQueue.queue(function(){
$("div").animate({fontSize: '4em'}, 2000);
$(this).dequeue();
});
newQueue.queue(function(){
$("div").animate({height: '+=100px'}, 2000);
$(this).dequeue();
});
newQueue.dequeue(); //執(zhí)行隊(duì)列中的第一個(gè)動(dòng)畫(huà)
});

在上述代碼中，我們首先使用stop()方法停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà)。接下來(lái)，我們使用queue()方法將一個(gè)新的動(dòng)畫(huà)添加到隊(duì)列中。在隊(duì)列中的所有動(dòng)畫(huà)執(zhí)行完畢后，我們使用dequeue()方法執(zhí)行下一個(gè)動(dòng)畫(huà)。我們還可以使用一個(gè)空jQuery對(duì)象來(lái)創(chuàng)建一個(gè)新的隊(duì)列，使得我們可以將多個(gè)動(dòng)畫(huà)按照指定的順序添加到隊(duì)列中，并執(zhí)行隊(duì)列中的第一個(gè)動(dòng)畫(huà)。