end（）如何爲animate（）工作？

Question

我目前正在考慮鏈接我的jQuery代碼。一個元素需要挖掘邊界，動畫。我的解決辦法：動畫邊框寬度爲零，然後刪除類：

$(".imgWrap", element).animate({ borderWidth: "0px" }).end() 
    .removeClass("border"); 

動畫（）應該返回所包裝的元素，但我從jQuery API瞭解，end()會前的物體返回到其狀態撥打.find。

.find是在示例的上下文中，所以我冒昧地將其替換爲.animate。唉，這對我不起作用。 .end()的結果是.animate()的結果。

Answer 1

因爲你（現在）沒有find過濾器（或任何其他過濾器），end沒有任何可撤消。它與animate無關。

如果您先選擇一個容器，然後在其中尋找imgWrap，你可以撤消過濾器：

$('.container').find('.imgWrap').animate({borderWidth: '0px'}).end();

以上將返回匹配$('.container')的元素，作爲find是撤消通過end

什麼可能會產生混淆的事情是，如果你animate後立即連鎖removeClass ，removeClass不會等待animate完成，因此它會顯示沒有動畫發生。您需要刪除的類的animate的complete功能：如果我這樣做

$(".imgWrap", element).animate({ borderWidth: "0px" }, function(){ 
    $(this).removeClass('border'); 
}); 

Answer 2

.end()返回的jQuery對象將其狀態之前.find()

即：

$('div').find('.class').end() 

然後鏈接後剩下的是$('div')的結果。它不會改變有關元素本身的任何內容。

大多數jQuery方法返回的jQuery對象不僅包含當前的匹配元素，而且還包含來自先前鏈接調用的結果堆棧。

因此，當您撥打.find()時，之前的列表仍然存儲在該堆棧上。撥打.end()只是從堆棧中刪除最後一項。

要解決實際問題（即更改樣式後的動畫已完成），你需要把這種變化在complete callback function parameter到.animate()本身。

$(".imgWrap", element) 
    .animate({ borderWidth: "0px" }, function() { 
     $(this).removeClass("border"); 
    });