jquery - JQuery 如果不在悬停区域

Question

嗨，

我对JQuery hover()有疑问。

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

所以问题是当我不悬停.sectionUpImage时，我希望动画停止并返回到它的原始状态。

代码：

$(document).ready(function(){

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

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

    },function(){

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

    });

});

如何应用？

谢谢

Answer 1

添加停止（）；

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

Answer 2

Adam 很擅长使用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/