停止jQuery动画堆叠

问题描述

我的选项框徘徊在网页的右上方.它的不透明度设置为10％，以免对用户造成阻碍.当他们将鼠标悬停在(鼠标)上时，我使用jQuery将其淡入并向下滑动内容(鼠标移开时则相反).

I have an Options box that hovers in the top right of the webpage. It's opacity is set to 10% so as not to be obstructive to users. When they hover over (mouseenter) it I use jQuery to fade it in and slidedown the content (and the reverse on mouseout).

如果他们反复执行此操作，尽管动画不断堆积，有时您可能会陷入鼠标静止不动但盒子溜溜溜的情况.

If they do this repeatedly though the animation stacks up and you can sometimes be left in a situation where your mouse is stood still but the box is yo-yoing around.

如何解决这种情况?

这是我当前设置动画的方式

Here is how I currently setup the animations

$("#dropdown").mouseenter(function() {
    $(this).fadeTo('fast',1);
    $("#options").slideDown();
});

$("#dropdown").mouseleave(function() {
    $(this).fadeTo('fast',0.1);
    $("#options").slideUp();
});

请注意，我仅使用jQuery，而不使用其他任何插件.

Note I am using jQuery only and not any other plugins.

推荐答案

调用停止终止任何操作现有动画，然后再开始制作新动画.您可能还应该使用悬停而不是mouseenter/mouseleave.

Call stop to terminate any existing animations before starting a new one. You should also probably use hover instead of mouseenter/mouseleave.

$("#dropdown").hover(function() {
    $(this).stop().fadeTo('fast',1);
    $("#options").stop().slideDown();
}, function() {
    $(this).stop().fadeTo('fast',0.1);
    $("#options").stop().slideUp();
});

这篇关于停止jQuery动画堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！