JQuery Stop()函数不停止动画
JQuery Stop()函数不停止动画
提问于 2012-10-10 08:41:57
我有两个句子，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秒)按下第一行动画将从句子的开头和中间开始。
结果：小提琴
我认为stop()函数有一些问题。请帮帮忙。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-10 09:16:46
我找到解决办法了
而不是使用
$("abbr", "#2" ).stop(true,true);
$("abbr", "#1" ).stop(true,true); 我使用
$("abbr").stop(false,true);结果：http://jsfiddle.net/d5VTg/3/
Stack Overflow用户
发布于 2012-10-10 09:08:51
我认为你不能清除你的延迟队列。尝试在循环中使用计时器来代替：
// 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)));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12815325
复制相关文章
相似问题
腾讯云开发者
