即使使用stop（）也可以建立JQuery動畫

Question

我正在放置一個精選內容滑塊元素，雖然技術上一切正常，但我仍然在快速單擊導航按鈕時遇到動畫構建。這裏是我的代碼：

this.LRSliderScrollVert = function(j) { 
    var viewOutside = GetObject(this.sliderObjectId); 
    if (parseInt(viewOutside.style.top) == 1 && j == 1){ 
     //do nothing 
    } else if (parseInt(viewOutside.style.top) == this.sliderBottomLimit && j == -1) { 

    } else { 
     //viewOutside.style.top = parseInt(viewOutside.style.top) + j +'px'; 
     var total = parseInt(viewOutside.style.top) + j + 'px'; 
     $(viewOutside).stop().animate({ 
      top: total 
     }, 700, 'swing'); 
    } 
} 

正如你所看到的，我已經使用的stop（），但它似乎並沒有被給我我想要的結果，這是一個點擊呼叫動畫並沒有其他的呼叫動畫功能將被處理，直到第一個動畫完成。

我試過停止（true，true），結果也沒有區別。

任何幫助將不勝感激。謝謝。

Answer 1

.stop(true, true)停止當前正在運行的動畫，將其推進到最後並將其從動畫隊列中移除。這聽起來不像你要求的那樣。

如果您希望後續動畫在正在進行之後完成，那麼只需刪除.stop()，因爲新動畫只會在當前動畫之後添加到隊列中。

如果您希望隨後的動畫根本無法啓動，如果對象當前正在動畫，則可以檢查該對象是否正在動畫，如果是，則避免啓動另一個動畫。

忽略任何未來的動畫，同時它仍然從最後點擊動畫，你可以這樣做：

this.LRSliderScrollVert = function(j) { 
    var viewOutside = GetObject(this.sliderObjectId); 
    if (parseInt(viewOutside.style.top) == 1 && j == 1){ 
     //do nothing 
    } else if (parseInt(viewOutside.style.top) == this.sliderBottomLimit && j == -1) { 

    } else { 
     var total = parseInt(viewOutside.style.top) + j + 'px'; 
     // remove any objects from the selector that are currently animating 
     // if there are none left, then it will do nothing 
     $(viewOutside).not(":animated").animate({ 
      top: total 
     }, 700, 'swing'); 
    } 
} 

我刪除了.stop()因爲這不是你想要的。這將停止當前的動畫，但你說你想繼續。你想要跳過的是未來的動畫，而當前的動畫正在運行。

我添加了.not(":animated")以從選擇器中刪除當前正在動畫的任何對象。如果你的一個對象是動畫，那麼這會留下一個空的jQuery對象，當你調用.animate()方法時，它將不會執行任何操作。這隻需要在測試.is(":animated")上使用if聲明就可以節省一些代碼。