$ .slideToggle（）＆$ .hover（）動畫隊列問題

我想在jQuery中設置一個非常基本的懸停動畫。將鼠標移到div上，主要內容向下滑動，向上滑動並向上滑動。

<script type="text/javascript"> 
    $(function() { 
     $('.listItem').hover(function() { 
      $(this).find('.errorData').slideToggle('slow'); 
     }); 
    });</script>

這段代碼工作正常，但明顯的問題是動畫排隊，如果你的鼠標進出真的很快。

爲了緩解這個問題，我已經閱讀之前放置的.stop(true)函數可以停止上一個動畫並清除動畫隊列。所以我試過這段代碼：

<script type="text/javascript"> 
    $(function() { 
     $('.listItem').hover(function() { 
      $(this).find('.errorData').stop(true).slideToggle('slow'); 
     }); 
    });</script>

我現在的問題是，這似乎只能在第一個mousein和mouseout上工作。之後，動畫不再觸發，也沒有任何反應。這是Google Chrome DEV頻道。

這似乎加快了鼠標移入和移出的速度。

我似乎無法解決問題是什麼，這JSFiddle有一個工作（並打破我的電腦）的例子。

編輯：我懷疑這是jQuery的1.4.2中的錯誤，並提出一個bug票：http://dev.jquery.com/ticket/6772

來源

2010-07-05 Alastair Pitts

嘗試

.stop(true,true)

，或者您可以使用此hoverIntent plugin

來源

2010-07-05 06:10:05 Reigel

這種有點作品。它解決了動畫不再起作用的問題，但它現在來回跳動並閃爍，而不是流暢的動畫。 – 2010-07-05 06:12:52

是的......確實如此。這是因爲懸停的行爲......好吧，你可以嘗試這個插件...我在這樣的時代使用它，http://cherne.net/brian/resources/jquery.hoverIntent.html – Reigel 2010-07-05 06:19:10

謝謝，我'我會給插件一個去。 – 2010-07-05 11:46:30

.stop(true, true)

像冠軍一樣工作：

$('.subpage-block').hover(function(){ 

     $('.subpage-block-heading span', this).stop(true,true).fadeToggle('fast'); 

      $('.subpage-block-content', this).stop(true,true).slideToggle(); 

    });

來源

2012-01-17 01:20:32

MayBe better？

$('.listitem').hover(function(){ 
    if (!$(this).find('.errorData').hasClass('down') && 
     !$(this).find('.errorData').hasClass('up')) { 
    $(this).find('.errorData').addClass('down').slideDown('fast', function() { 
     $(this).removeClass('down'); 
    }); 
    } 
}, function() { 
    if (!$(this).find('.errorData').hasClass('up')) { 
    $(this).find('.errorData').addClass('up').slideUp('fast', function() { 
     $(this).removeClass('up'); 
    }); 
    } 
});

這種方式隊列最多2個，一個是起始時，另一個是關閉時。有了我們的第一個條件，我們可以保持下去。

來源

2012-01-18 20:50:01

這是如何改善，糾正或改變接受的答案？ – 2012-10-27 20:42:48

$ .slideToggle（）＆$ .hover（）動畫隊列問題

回答

相關問題