Question

jQuery的stop()如何实际运作？

如果你看here (http://jsfiddle.net/hWTT6/)，当你将鼠标悬停在蓝色主框上时，它应该渐变为红色，当你将它悬停时，它应该会消失。问题是，即使鼠标在第一次淡入淡出完成之前已经徘徊，它也会完全淡化为红色（然后再变回蓝色）。使用幻灯片效果可以更清楚地看到问题。将鼠标悬停在幻灯片“按钮”上，主框将滑动为蓝色，悬停，它将向后滑动。但是在第一个动画完成之前，请尝试在开关和关闭之间徘徊。您将看到所有四个动画都已执行。我在这里包含了两个例子，表明它不仅仅是一个效果或其他问题。

我认为通过在动画之前添加stop可以很容易地解决这个问题，如代码中所示。但是，如果我这样做，当前的动画将停止，而下一个动画将永远不会启动。几乎就像stop阻止了在调用stop之后正在发生的动画。

我在这里缺少什么？

感谢。

Answer 1

您遗漏.stop()接受两个参数。两个布尔值，表示：

- clearQueue (first)
- jumpToEnd (second)

通过致电$('#foo').stop( true, true ).doSomeOtherStuff()，您应该达到预期的目标。

参考：.stop()

Answer 2

问题是CSS在任意点停止都搞砸了。

fadeIn()，fadeOut()，slideUp()和slideDown()从当前状态移至新状态，然后恢复为原状 - 而不是原始CSS。

您需要将CSS恢复到可用状态，以便在.stop（）之后继续，或者更清楚地指定动画目标。

正如其他人所说的那样，你可以通过确保当你停止动画时它跳到它的末尾而不是让所有东西都处于任意状态来将CSS放到正确的位置。

<强>更新

请查看此演示更新中的代码：http://jsfiddle.net/hWTT6/5/

它可能并不完全是你想要它执行的方式，但如果你不想让动画运行它的话，那就是让动画恢复到可以继续运行的状态。你想要的。

$(function() {
    $('#fade')
    .mouseenter(function() {
        $('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() {
            $('#fg_fade').css('height', '100%');
        });
    })
    .mouseleave(function() {
        $('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow');
    });

    $('#slide_fire')
    .mouseenter(function() {
        $('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() {
            $('#fg_fade').css('opacity', 1);
        });
    })  
    .mouseleave(function() {
        $('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() {
            $('#fg_fade').css('opacity', 1);
        });
    });
});

Answer 3

您可以将stop（）选项设置为（true，true），以便取消cue中的所有事件并跳转到上一个动画的结尾。看看小提琴：http：//jsfiddle.net/hWTT6/4/

Answer 4

可以通过以下不同方式调用stop方法：

.stop(true); 
//Same as:
.stop(true, false); //Empty the animation queue only


//Or
.stop(true,true); // Empties the animation queue AND jumps to the end


//Default
.stop()

//Same as

.stop(false,false);

使用.animate可能有更好的方式：Demo Here

$(function() {
    $('#fade')
    .mouseenter(function() {
        $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow');
    })
    .mouseleave(function() {
        $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow');
    });  


    $('#slide_fire')
    .mouseenter(function() {
        $('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');    
    })  
    .mouseleave(function() {
        $('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow');
    });

});

这样，动画会在您想要时停止并仍然运行下一个动画。

执行.stop然后slideUp/slideDown或fadeIn/fadeOut的问题是动画可能会过早结束并保持不正确的高度/不透明度。

Answer 5

问题是由fadeIn，fadeOut等工作方式引起的。你可能会期望它们在0和1之间淡出。然而，实际上它们在0和任何“基线”不透明度之间都会消失。你可以在这里看到：

http://jsfiddle.net/hWTT6/7/

您会注意到我将初始不透明度设置为.5。现在，当我致电fadeIn时，它不会一直消失到1，它会消失到.5的基线。当你过早地停止动画时会出现问题，“基线”会变成停止时不透明度。现在，当您在fadeIn上调用mouseleave时，它会尝试淡入此新基线并发现它已经存在。你可以通过这里看到这个说明：

http://jsfiddle.net/hWTT6/8/（原创，但.stop）

如果将鼠标放在slide上，然后在动画中途将其移除，它将停在中间位置。现在将鼠标放回slide并等待动画完成。如果您现在移除鼠标，您将看到它向下滑动到第一个动画停止的位置。那是因为这是新的“基线”。

您要解决此问题的方法实际上是使用更明确的动画替换fadeIn，fadeOut等。例如，使用fadeTo告诉它在0和1之间淡出：

http://jsfiddle.net/hWTT6/6/

请注意，因为我告诉它淡入0或1一切正常。使用slideUp替换slideDown和animate也可以做类似的事情。

jQuery的stop（）似乎阻止了尚未排队的动画

5 个答案: