懸停事件結束後div的動畫不停止

因此，這是我的第一個來自社區的問題。懸停事件結束後div的動畫不停止

問：我試圖表現出徘徊div與動畫div &增加寬度。

問題：我通過的jQuery & CSS實現這一點，但，問題是持續徘徊在動畫不停止。所以，我想在鼠標不在div的時候從內存中刷新以前的動畫。

我搜索並找到類似stop()的東西，但我沒有得到想要的結果。

Check what i have achieved yet

提前感謝！

來源

2012-07-28 SVS

它認爲這將使用全給你的http：//的jsfiddle .net/fsF3W/4/ – MMK 2012-07-28 12:01:26

@MMK沒有其行爲與我發佈的相同。我沒有發現它有幫助。 – SVS 2012-07-28 18:34:19

所以，感謝大家的回答&特別感謝@Raminson。

我試圖讀取&瞭解stop() &最後我想通了，我想要什麼

我用stop(true, false)

真正將刪除排隊的動畫。假不會使動畫跳到結尾

和它的工作：Demo

jQuery代碼：

$('#slider_thumbnail li .slide_thumb').hover(function(e){ 

       $(this).find('.slide_btn').stop(true, false).animate({width:240}); 
       $(this).find('.image-wrapper').stop(true, false).show('slow'); 
      },function(e){ 

       $(this).find('.slide_btn').stop(true, false).animate({width:125}); 
       $(this).find('.image-wrapper').stop(true, false).hide('slow'); 
});

來源

2012-08-01 08:16:51 SVS

你應該stop()前animate()方法使用，請嘗試以下操作：

$('#slider_thumbnail li .slide_thumb').hover(function(e){ 
    $(this).find('.slide_btn').stop().animate({width:240}); 
    $(this).find('.image-wrapper').show('slow'); 
},function(e){ 
    $(this).find('.slide_btn').stop().animate({width:125}); 
    $(this).find('.image-wrapper').hide('slow'); 
});

DEMO

來源

2012-07-28 11:49:17 undefined

這是閃爍的動畫 – 2012-07-28 11:51:40

嘿！它現在處於更好的狀態，但是，正如@SJGJ所說，其閃爍和停止多次懸停後，它顯示一次完整的圖像和隱藏。但是，感謝讓它變得更好。 +1對你來說 – SVS 2012-07-28 11:57:26

@SVS嘿，不客氣，你也可以使用圖片的動畫功能，併爲它們指定持續時間。 – undefined 2012-07-28 12:05:36

我以前用過hoverIntent插件這個問題，它的工作非常出色。也許你想試試這個：

來源

2012-07-28 11:49:22 bingjie2680

謝謝！爲答案。我在檢查這個插件之前檢查它是否正常並且它也可以工作。但是，我不想使用任何額外的插件。但這會幫助其他人爲此+1。 – SVS 2012-07-28 11:53:54

我很欣賞它不是你想要的，但我很無聊，想要做到這一點。你想要什麼（我覺得）

純CSS版本：http://jsfiddle.net/fsF3W/5/