Question

我有非常简单的jquery代码：

 $(document).ready(function(){
        $('img.marqFl').on({
            mouseenter: function() {
                $(this).animate({height: 300}, 600);
            },
            mouseleave: function() {
                $(this).animate({height: 150}, 600);
            }
        }); 

    });

但它没有做我想要的......

我有10张同一类的图像 - marqFl。他们都有150个高度。当用户将鼠标移动到某个图像上时，它应该开始将高度增加到300.

但是如果他们将鼠标从图像中移出，它应该停止并开始减少回到150。如果他们将鼠标移回图像，它应该停止减少并再次开始增加。对于这两种情况，必须打破旧动画。用户不应等待上一个动画结束以启动新动画。

如果他们将鼠标移动到其他图像，则前1个必须直接（无动画）到150，新图像应该开始增加。

Answer 1

使用stop功能：

$(this).stop().animate({height: 300}, 600);

Answer 2

只需添加stop()：

 $(document).ready(function(){
        $('img.marqFl').on({
            mouseenter: function() {
                $(this).stop().animate({height: 300}, 600);
            },
            mouseleave: function() {
                $(this).stop().animate({height: 150}, 600);
            }
        }); 

    });

快速移动开/关项时jQuery mouseenter mouseleave bug

2 个答案: