Question

我们来看看这个剧本：

$('a').hover(function() {
    $('div').stop(c,j).fadeIn();
}, function() {
    $('div').stop(c,j).fadeOut();
});

使用c=0,j=0，如果我多次a次，我的div就会淡入淡出，然后出现... ... yerk。
使用c=1,j=1，它几乎可以实现我想要的效果，但由于jumpToEnd参数，我们获得了这种闪烁效果，并且它看起来很麻烦。
所以最后，我想要的是c=0,j=1，但是如果我进入，并且快速结束并重新进入，动画停止，下一个淡入淡出功能将不会启动，我的div是半透明的。为什么？

Another visual example.

我经常遇到这个问题，并想知道为什么我找不到任何东西。（最后我记得是对jQuery stop()页面的评论，但现在删除了评论。）

Answer 1

以下是.stop()的所有不同用法之间的更好比较：http://jsfiddle.net/4v8Uk/13/

<div data-one="0" data-two="0" id="a">a</div>
<div data-one="1" data-two="0" id="b">b</div>
<div data-one="1" data-two="1" id="c">c</div>
<div data-one="0" data-two="1" id="d">d</div>

$("div").hover(function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).toggle("slow");
});

选项a和b似乎更接近您所寻找的内容。（0,0和1,0）

更新：我仍然没有明确答案为什么会发生，但我相信它发生是因为jQuery已经看到已经显示的元素，因此它没有显示它。为什么这不起作用.toggle（）我不知道。

但是，您可以使用.animate重新创建动画来修复它。

http://jsfiddle.net/4v8Uk/17/

$("div").hover(function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).animate({"opacity":"0", "height":"0px", "width":"0px"},"slow");
}, function(){
    var d = $(this).data();
    $(this).stop(d.one,d.two).animate({"opacity":"1", "height":"100px", "width":"100px"},"slow");
});

jQuery.stop（1,1）启动下一个动画，但不停止（1,0）

1 个答案: