-1

我有非常简单的 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，并且新图像应该开始增加。

4

2 回答 2

5

使用停止功能：

$(this).stop().animate({height: 300}, 600);
于 2012-07-01T09:30:07.833 回答
1

只需添加stop()：

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

    });
于 2012-07-01T09:30:11.843 回答