JQuery停止（）函数不停止动画

Question

我有2句话和highlight每个单词与animation。

如果我按"First Line"按钮动画将播放第一行，如果按"Sec Line"按钮第一行动画将停止并且秒行动画将播放。

jQuery代码

var time = 15; 

$("#go").click(function(){ 
    $("abbr", "#2").stop(true,true); 
    $("abbr", "#1").each(function(i,e) { 
      $(e).delay(i * ((time * 1000)/$("abbr", "#1").length)) 
       .animate({'color': 'red'}, 1, function() { 
       $(e).animate({ 'color': 'black' }, 5000); 
       }); 
    }); 
}); 

$("#back").click(function(){ 
    $("abbr", "#1").stop(true,true); 
    $("abbr", "#2").each(function(i,e) { 
      $(e).delay(i * ((time * 1000)/$("abbr", "#2").length)) 
       .animate({'color': 'red'}, 1, function() { 
       $(e).animate({ 'color': 'black' }, 5000); 
       }); 
    }); }); 

HTML代码

<span id="1"> 
    <abbr>fractal </abbr> 
    <abbr>is a mathematical </abbr> 
    <abbr>that has </abbr> 
    <abbr>a fractal dimension </abbr> 
    <abbr>that usually</abbr> 
    <abbr>exceeds its </abbr> 
    <abbr>topological dimension</abbr> 
    <abbr>fractal </abbr> 
    <abbr>is a mathematical </abbr> 
    <abbr>that has </abbr> 
    <abbr>a fractal dimension </abbr> 
    <abbr>that usually</abbr> 
    <abbr>exceeds its </abbr> 
    <abbr>topological dimension</abbr> 
</span> 
<br> 
<br> 
<span id="2"> 
    <abbr>and may </abbr> 
    <abbr>fall between </abbr> 
    <abbr>the integers </abbr> 
    <abbr>Fractals </abbr> 
    <abbr>are typically </abbr> 
    <abbr>self-similar </abbr> 
    <abbr>patterns</abbr> 
    <abbr>and may </abbr> 
    <abbr>fall between </abbr> 
    <abbr>the integers </abbr> 
    <abbr>Fractals </abbr> 
    <abbr>are typically </abbr> 
    <abbr>self-similar </abbr> 
    <abbr>patterns</abbr> 
</span> 
<br> 
<br> 
<button id="go">First Line</button> 
<button id="back">Sec Line</button> 

每一件事情是好的，但是当我玩第一线的动画和一些秒例如（3 sec） 后按"sec line"按钮动画，再次（例如3秒）按第一行动画动画将从开始和结束开始句子的中间。

结果：jsfiddle

我觉得stop()功能有一定的问题。 请帮忙。

Answer 1

我得到了解决

而是采用

$("abbr", "#2").stop(true,true); 
$("abbr", "#1").stop(true,true); 

我使用

$("abbr").stop(false,true); 

结果： http://jsfiddle.net/d5VTg/3/

Answer 2

我不认为你可以清除你的延迟队列。尝试使用计时器内循环，而不是：

// check if the timer is running, in that case, clear it: clearTimeout(timer); 

var timer = setTimeout(function(){ 

    //do animation stuff 

}, (i * ((time * 1000)/$("abbr", "#1").length)));