当用户按下按钮移动到下一个图像时,我正在处理图像上的一些转换。 当彼此相邻的多个图像非常窄时,这些图像将同时转换。 因此,我检查图像上的宽度,并将薄的数据添加到数组中,然后对数组中的每个对象运行转换。 我想在数组中每个图像的动画之间创建一点延迟,所以我试图在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 因此,如果你想要你可以将衰落链接在一起,所以当一个完成时它会调用下一个。 如果那不是你想要的,我可能会误读你的问题。
此外,在示例3中,我认为您希望像这样编写它,并且没有将函数定义传递给setTimeout,因为它不会执行任何操作。
setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);
以上就是jQuery教程分享使用setTimeout延迟jQuery动画相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/558316.html