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

enter image description here

我认为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)));

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

2 个答案: