取消所有排隊的jQuery slideUp和slideDown動畫

我有一個接口，大量使用jQuery slideUp和slideDown效果以三態方式展開項目。取消所有排隊的jQuery slideUp和slideDown動畫

onmouseover: function() { 
this.find('.details', this).slideDown(); 
}, 
onmouseout: function() { 
this.find('.details', this).slideUp(); 
}

然而，當用戶在這些界面元素快速移動鼠標動畫跟不上和項目將被上下滑動後不久鼠標已經離開界面區域。

有沒有辦法在鼠標離開物品的容器div時取消所有排隊的幻燈片動畫？

來源

2010-03-02 Candidasa

我相信你應該能夠只需添加一個.stop（），它會照顧的，對你：

onmouseover: function() { 
this.find('.details', this).stop().slideDown(); 
}, 
onmouseout: function() { 
this.find('.details', this).stop().slideUp(); 
}

來源

2010-03-02 00:57:24

此外，請確保您使用的是jQuery 1.7.2或更高版本，因爲之前在使用slideUp（）和slideDown（）時使用stop（）時會出現錯誤，如果您在幾次之內快速懸停和關閉，你的元素會遭遇奇怪的高度問題。 – jackocnr 2012-05-11 20:15:08

即使使用jQuery 1.7.2，我也觀察到這些奇怪的問題...你確定版本號嗎？ – 2012-09-17 15:29:14

我在1.9中遇到同樣的問題。關鍵是從'slideDown（）'中移除'.stop（）'。如果它在那裏，'jQuery'有時會直接跳到目標高度，「停止」動畫。 – jclancy 2013-08-02 18:31:06

一般來說你要調用stop()開始這樣的動畫時：

$("...").hover(function() { 
    $(this).stop().slideDown(); 
}, function() { 
    $(this).stop().slideUp(); 
});

這應該足以避免長時間運行的動畫隊列。

您還可以使用$.clearQueue()來全局清除尚未開始的動畫。

此外，如果您將這些設置爲mouseover()和mouseout()，則可以更簡單地使用hover()事件來代替。

來源

2010-03-02 01:04:40 cletus

它也好得多，如果你把參數stop()，就像這樣：stop(true,true) ...

來源

2010-07-27 08:42:38 user403151

你真的想答案是所有其他三個答案的組合。

$("...").hover(function() { 
    $(this).stop(true, true).slideDown(); 
}, function() { 
    $(this).stop(true, true).slideUp(); 
});

您希望true s停止，因爲它們會清除掛起的動畫隊列。如果你不使用這些，你會發現在元素上快速移動鼠標會產生錯誤的結果。

來源

2011-07-21 20:03:41

在我的情況下，我也在尋找一個.stop()解決方案，以擴大和縮小廣泛的動畫隊列。然而，它仍然沒有解決，因爲它不是光滑的，它是越野車，使它不再滑落。

因此，我提出了一個與取消隊列無關的解決方案，但它可能對您有些幫助。解決方案是在動畫目標當前未動畫時將其向下或向上滑動。

$("#trigger").on({ 
    mouseover: function() { 
     $("#animationTarget").not(":animated").slideDown(); 
    }, 
    mouseleave: function() { 
     $("#animationTarget").not(":animated").slideUp(); 
    } 
});

來源

2014-04-09 18:19:09 falsarella

你可以做類似如下：http://jsfiddle.net/3o2bsxo6/3/

的JavaScript

$('h5').each(function(){ 
    $(this).unbind('mouseover'); //unbind previous events (prevent repeats) 
    $(this).unbind('mouseout'); 

    $(this).on('mouseover',function(){ 
     if(!$(this).next('.details').is(':visible')){ //if not visible 
      $(this).next('.details').slideDown(); //slidedown       
     } 
    }) 
    $(this).on('mouseout',function(){ 
     if($(this).next('.details').is(':visible')){ //if visible 
      $(this).next('.details').slideUp(); //slideup       
     } 
    })  
})

HTML：

<h5>Hover To Slide</h5> 
<p class="details"> 
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.  
</p> 
<h5>Hover To Slide</h5> 
<p class="details"> 
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.  
</p> 
<h5>Hover To Slide</h5> 
<p> 
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.  
</p>

CSS：

p{ 
    display:none; 
}

來源

2015-04-17 18:45:56 maudulus

類似的查詢被張貼在this線程。使用

stop（true，false）

您可以達到無bug的效果。

$('#YourDiv').on('mouseenter', function(){ 
    $(this).next().slideDown(250).stop(true, false).slideDown() 
});

我認爲還有就是你想放滑和幻燈片向下動畫元素後#YourDiv。

這將跳轉到最後一個事件的動畫並清除鏈中的所有未決事件。

來源

2015-11-14 06:28:13

取消所有排隊的jQuery slideUp和slideDown動畫

回答

相關問題