我需要在jquery中循环简单的延迟动画。
我需要在jquery中循环简单的延迟动画。
提问于 2013-02-19 21:07:33
嗨，我有一组图像，以不同的速度淡入，我需要无限循环。有人能帮我处理密码吗。这是一个基本的动画，但是我找到的代码以相同的速度循环所有的东西。有人能帮我把这个动画放进一个循环中吗?这个循环会产生同样的衰减效果，但会无限循环。谢谢
谢谢你的帮助。
<script>
$(document).ready(function anim() {
// fade in initial
$('#img-1').delay(0).fadeIn(500);;
$('#img-2').delay(0).fadeIn(500);
$('#txt-1').delay(0).fadeIn(500)
$('#txt-2').delay(0).fadeIn(500);
// move to set 2
$('#txt-1').delay(2000).fadeOut(500);
$('#txt-2').delay(2000).fadeOut(500);
$('#txt-3').delay(2000).fadeIn(500);
$('#txt-4').delay(2000).fadeIn(500);
$('#img-1').delay(5000).fadeOut(500);
$('#img-2').delay(5000).fadeOut(500);
$('#img-3').delay(5000).fadeIn(500);
$('#img-4').delay(5000).fadeIn(500);
// move to set 3
$('#txt-3').delay(8000).fadeOut(500);
$('#txt-4').delay(8000).fadeOut(500);
$('#txt-5').delay(8000).fadeIn(500);
$('#txt-6').delay(8000).fadeIn(500);
$('#img-3').delay(11000).fadeOut(500);
$('#img-4').delay(11000).fadeOut(500);
$('#img-5').delay(11000).fadeIn(500);
$('#img-6').delay(11000).fadeIn(500);
// move to set 4
$('#txt-5').delay(14000).fadeOut(500);
$('#txt-6').delay(14000).fadeOut(500);
$('#txt-7').delay(14000).fadeIn(500);
$('#txt-8').delay(14000).fadeIn(500);
$('#img-5').delay(17000).fadeOut(500);
$('#img-6').delay(17000).fadeOut(500);
$('#img-7').delay(17000).fadeIn(500);
$('#img-8').delay(17000).fadeIn(500);
});
</script>
<body>
<div id="home-right">图片
</body>回答 1
Stack Overflow用户
发布于 2013-02-19 21:42:20
用setTimeout进行一点递归应该可以工作。
$.fn.loopFadeAnimation = function (delay, fadeType, duration) {
var that = $(this);
delay = delay || 0;
duration = duration || 0;
// call animation
$(this).delay(delay)[fadeType](duration);
// call loopFadeAnimation again with a setTimeout
setTimeout(function () {
var newFadeType = ('fadeIn' === fadeType)
? 'fadeOut'
: 'fadeIn';
$(that).loopFadeAnimation(delay, newFadeType, duration);
}, delay + duration);
return $(this); // for chaining
};
$('#img-1').loopFadeAnimation(0, 'fadeIn', 500); // etc.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14967441
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号