使用setTimeout延迟jQuery动画
当用户按下按钮移动到下一个图像时，我正在处理图像上的一些转换。 当彼此相邻的多个图像非常窄时，这些图像将同时转换。 因此，我检查图像上的宽度，并将薄的数据添加到数组中，然后对数组中的每个对象运行转换。 我想在数组中每个图像的动画之间创建一点延迟，所以我试图在1秒超时后运行我的jQuery.animate。
以下是我试图让超时工作失败的方法：
1。
for (i=0; i < set.length; i++) { if (i != 0) { setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); } else { set[i].transitionOut( $('#gallery'), 562 ); } } 2。
for (i=0; i < set.length; i++) { if (i != 0) { function tempTransition() { set[i].transitionOut( $('#gallery'), 562 ); } setTimeout(tempTransition, 100); } else { set[i].transitionOut( $('#gallery'), 562 ); } }
3。
for (i=0; i < set.length; i++) { if (i != 0) { setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100); } else { set[i].transitionOut( $('#gallery'), 562 ); } }
transitionOut（）：
jQuery.fn.transitionOut = function(parent, height) { this.animate({ height: '0', top: height + 'px' }, function() { $(this).remove(); }); }
我使用CMS的闭包示例工作了。 但是，现在我遇到了一个新问题。 转换仅发生在第二个图像上。 当有三个图像时，它将为图像1，延迟，动画图像2，动画图像3设置动画。在2和3之间没有延迟。
这是新代码：
for (i=0; i < set.length; i++) { (function(i) { if (i != 0) { function tempTransition() { set[i].transitionOut( $('#gallery'), 562 ); } setTimeout(tempTransition, 200); } else { set[i].transitionOut( $('#gallery'), 562 ); } })(i); }
通过查看你的代码，我认为你还有另一个闭包问题 ，也许是人们使用循环和嵌套函数时遇到的最常见的问题。
setTimeout回调函数引用的i变量是相同的 （ 因为JavaScript只有函数作用域，而不是块作用域 ），并且当这些函数异步执行时，循环已经完成，并且i变量将包含set.length - 1对于使用setTimeout所有情况都是set.length - 1 。
像往常一样，尝试使用另一个闭包捕获i变量：
for (var i=0; i < set.length; i++) { (function (i) { if (i != 0) { setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100); } else { set[i].transitionOut( $('#gallery'), 562 ); } })(i); }
在定时动画/效果方面，使用超时是一件很有趣的事情。
我没有测试你的代码，但通过浏览它，我注意到你正在使用setTimeout而没有任何东西来清除它们。
当用户在“延迟”期间触发事件时会发生什么？ 你必须实现一些东西来管理它。
对不起，我现在没有给你答案，也许是因为我有更多的时间或有人提出更优雅的解决方案。
jquery fadeOut http://docs.jquery.com/Effects/fadeOut允许你创建一个回调，这是一个你可以在fadeOut完成时运行的函数。 因此，如果你想要你可以将衰落链接在一起，所以当一个完成时它会调用下一个。 如果那不是你想要的，我可能会误读你的问题。
此外，在示例3中，我认为您希望像这样编写它，并且没有将函数定义传递给setTimeout，因为它不会执行任何操作。
setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);