使用setTimeout延迟jQuery动画
我正在处理图像上的某些转换,当用户按下按钮移动到下一个图像时。如果有多幅图像彼此相邻,且图像非常窄,则这些图像将同时进行过渡。所以我检查图像上的宽度,并将精简的图像添加到数组中,然后在数组中的每个对象上运行转换。我想在数组中的每个图像的动画之间创建一个小的延迟,所以我试图在1秒超时后运行我的jQuery.animate。使用setTimeout延迟jQuery动画
下面是我试图让超时没有成功的工作方式:
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);
}
通过看你的代码,我觉得你有yet another closure problem,也许是最常见的问题,当人们用循环和嵌套函数工作,我已经看到了。
的i
变量,您的setTimeout
回调函数指,是相同(因为JavaScript有只函数作用域的,而不是块范围),和由时间的那些功能是异步执行的,环路已经对于所有使用setTimeout
的情况,已完成,和i
变量将包含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);
}
谢谢。这帮助我克服了第一个障碍。 :) – Jonnie 2009-11-30 18:43:32
使用超时是当涉及到定时动画/效果时,它会欺骗你。
我没有测试你的代码,但通过浏览它,我注意到你正在使用setTimeout
没有任何东西来清除它们。
当用户在'延迟'期间触发事件时会发生什么?你必须实施一些措施来管理。
对不起,我现在没有你的答案,也许当我有更多的时间后,或有人出来一个更优雅的解决方案。
jquery fadeOut http://docs.jquery.com/Effects/fadeOut让你创建一个回调,这是一个你可以在fadeOut完成时运行的函数。所以如果你想要的话,你可以把渐变连在一起,所以当一个完成时它会调用下一个渐变。如果这不是你正在寻找的,我可能会误解你的问题。
另外,在示例3中,我认为您希望像这样编写它,并且没有将函数定义传递给setTimeout,因为这样做不会执行任何操作。
setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);
什么是'transitionOut'功能?你能提供这些代码吗? – 2009-11-30 03:06:36
当然。我已将它添加到我原来的问题中。 – Jonnie 2009-11-30 13:15:12