我正在尝试制作一个在运行程序时运行动画的脚本,并且我希望两者都同步。(在 JSFiddle 内部更清晰:http: //jsfiddle.net/Vhutama/Y8zNQ/5/)。我正在使用 JQuery 和 JQueryUI 库。
代码是:
Javascript
$(function() {
for (var i = 0; i < 5; i++) {
console.log("log " + i);
$("#textplaceholder").append(i + " ");
$("#myDiv>div:eq(" + i + ")").delay( 1000 * i).effect("highlight", {color: 'lightblue'}, 1000);
}
});
HTML
<body>
<div id='myDiv'>
<div class='ui-state-default'>Lorem</div>
<div class='ui-state-default'>Ipsum</div>
<div class='ui-state-default'>Dolor</div>
<div class='ui-state-default'>Sit</div>
<div class='ui-state-default'>Amet</div>
</div>
<div id='textplaceholder'>Looping for : </div>
</body>
我创建了一个循环来运行用于计算的代码——在这个例子中只有一个console.log()和一个.append() ——以及动画代码。问题是,我希望两者在每次迭代中都同步,例如,当我的动画位于第三个索引时,代码不应记录/附加超过 3 个。有什么建议吗?我在这里尝试了其他答案的递归解决方案,但不知何故它不适用于.animate()和.effect,尽管我是 JQuery 的初学者,所以也许我可能是错的。
在搜索时,我发现了http://api.jquery.com/promise/。这个功能能解决我的问题吗?如果是这样,任何人都可以提供一个快速的解释吗?
PS我不是以英语为母语的人,如果我的措辞错误或解释不好,请见谅。
谢谢你的时间!