jQuery的悬停出和动画缺陷

Question

尝试在真快徘徊在我的演示http://www.bootply.com/SIZ6SAdcWY

你会看到不完美的，因为用户可能会再次徘徊在当生命的事件运行过程中，如何克服这些问题？

Answer 1

写写关于在jQuery的.stop（）方法 - http://api.jquery.com/stop/。此方法将停止正在运行的匹配元素上的动画。在你的情况下，如果在动画和css方法之前设置.stop（true，true），则悬停会正常工作。

$(document).ready(function(){ 
    $('.box').not('.box .box-lower').hover(function() { 
     $(this).find('.productsThumbWrap').stop(true, true).animate({ "margin-top": "+=108px" }, "normal"); 
     $(this).find('.productsThumbWrap img').stop(true, true).css({opacity:1,'transition': 'opacity 0.3s ease 0.35s'}); 
    }, function(){ 
     $(this).find('.productsThumbWrap').stop(true, true).css({'margin-top': '92px'}); 
     $(this).find('.productsThumbWrap img').stop(true, true).css({opacity:0,'transition':'none'}); 
    }); 
}); 

Answer 2

如果启动了一些长动画，然后鼠标离开，则在鼠标悬停后动画仍在运行。

增加了一些停止（）调用结束它

http://www.bootply.com/2T8MaPakDU