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()
ます。助けてください。