Question

Hy，

我遇到了 JQuery hover（）的问题。

当我将鼠标悬停在.sectionUpImage上时，会触发动画。问题是，当我离开该区域时，动画仍在运行，它将一直运行直到完成，然后它将返回到原始状态。

所以问题是当我没有徘徊 .sectionUpImage 时，我希望动画停止并返回原始状态

代码：

$(document).ready(function(){

    $('.sectionUpImage').hover(function(){

        $('.sectionUp').animate({"height": "+=314px"}, "slow");

    },function(){

        $('.sectionUp').animate({"height": "-=314px"}, "slow");

    });

});

如何申请？

谢谢

Answer 1

添加stop（）;

 $('.sectionUp').stop().animate({"height": "+=314px"}, "slow");

Answer 2

亚当因使用stop()来阻止动画继续发挥作用。但是，由于您使用的是相对高度，因此您将遇到根据半动画元素的当前高度计算新高度的问题。有两种方法可以解决这个问题：

一：切换到绝对高度。您当前的jQuery将完美运行。类似的东西：

$(document).ready(function(){
    $('.sectionUpImage').hover(function(){
        $('.sectionUp').animate({"height": "314px"}, "slow");
    },function(){
        $('.sectionUp').animate({"height": "0px"}, "slow");
    });
});

二：使用stop( false, true )。这将在开始新动画之前将中断的动画跳转到其最终状态。这可能看起来有点刺耳，但至少会阻止任何不正确的最终高度。

http://api.jquery.com/stop/

如果没有悬停区域的JQuery

2 个答案: