Question

由于某种原因，我无法弄清楚，即使我使用的是stop方法，我的动画也在排队。我试过把它改成停止（真实，真实），但它没有用。我尝试过改变效果但它也不起作用。

 $('.box').mouseenter(function() {
    $(this).stop().find(".box-overlay").fadeIn("normal");
 });
 $('.box').mouseleave(function() {
    $(this).stop().find(".box-overlay").fadeOut("normal");
 });

如果有人可以告诉我我做错了什么，我将不胜感激？！

Answer 1

你应该在动画元素上使用.stop。

$('.box').mouseenter(function() {
   $(this).find(".box-overlay").stop().fadeIn("normal");
});
$('.box').mouseleave(function() {
   $(this).find(".box-overlay").stop().fadeOut("normal");
});

您可以将其简化为：

$('.box').on("mouseenter mouseleave", function(){
    $(this).find(".box-overlay").stop().fadeToggle("normal");
})

Answer 2

正如另一个答案所说，请确保您定位正确的元素.box-overlay。

您还可以使用悬停方法整合代码：

// mouseenter function
$('.box').hover(function() {

   $(this).find('.box-overlay').stop().fadeIn('normal');

// the next function is mouseleave
}, function () {

   $(this).find('.box-overlay').stop().fadeOut('normal');

});

即使使用.stop参数，jQuery动画也会排队

2 个答案: