0

2 つの文があり、highlight各単語にはanimation.

ボタンを押す"First Line"と最初の行のアニメーションが再生され、"Sec Line"ボタンを押すと最初の行のアニメーションが停止し、2 番目の行のアニメーションが再生されます。

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