0

我有 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()功能有问题。请帮忙。

4

2 回答 2

1

我得到了解决方案

而不是使用

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

我用

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

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

于 2012-10-10T09:16:46.717 回答
0

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

// 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)));
于 2012-10-10T09:08:51.720 回答