Question

尝试在我的演示http://www.bootply.com/SIZ6SAdcWY

中快速悬停

你会看到不完美，因为当动画事件运行时用户可能会再次悬停，如何克服这个问题？

Answer 1

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

$(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

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

添加了一些stop（）调用来结束它

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

Jquery徘徊，动画不完美

2 个答案: