我需要在 jquery 中循环简单的延迟动画答案

【问题标题】：I need to loop simple delayed animations in 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>

【问题讨论】：

使用setInterval调用加载下一张图片的函数，使用变量跟踪当前图片

标签： jquery loops infinite-loop

【解决方案1】：

使用 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.

【讨论】：

我实际上有不同的延迟，我试图以不同的速度淡入元素。
@user2088105 - 所以你会以与淡入不同的速度淡出#img-1？
我实际上有不同的延迟，我试图以不同的速度淡入元素，就是这个动画，我只需要永远循环它。 glenpointeoffice.com)。抱歉，对 jquery 来说是一种新手。
有没有办法转换整个动画并无限地运行它，或者是否有一个简单的代码 sn-p 只是说完成后再次运行动画？
您可以将其全部包装在一个函数中，然后将所有延迟和淡入淡出持续时间相加，然后在函数外部使用 setInterval 调用该函数并使用该总和作为第二个参数跨度>