如何让这个 jQuery 动画代码永远循环？答案

【问题标题】：How to make this jQuery animation code loop forever?如何让这个 jQuery 动画代码永远循环？
【发布时间】：2013-01-06 15:04:54
【问题描述】：

我正在尝试在滑块上创建一个文本动画循环... 我试过循环，但它没有工作.. 你能告诉我如何永远循环这个脚本..谢谢

<script>
$(document).ready(function() {
    $("#header").hide();
    var headerOne='I';
    var headerTwo='Am'; 
    var headerThree='So';
    var headerFour='Cool';
        $("#header").html(headerOne);
    $("#header").fadeIn(1000);
    $('#header').delay(1000).fadeOut(1000,function(){
    $(this).html(headerTwo).fadeIn(1000);
     $('#header').delay(1000).fadeOut(1000,function(){
     $(this).html(headerThree).fadeIn(1000);
     $('#header').delay(1000).fadeOut(1000,function(){
     $(this).html(headerFour).fadeIn(1000).delay(1000).fadeOut(1000);       
      });
        });
    });

});
</script>

谢谢！

【问题讨论】：

Setinterval 可以帮助setInterval("javascript function",milliseconds);

标签： jquery loops jquery-animate slider infinite-loop

【解决方案1】：

如果您稍微清理一下代码。您可以意识到不需要setInterval。只需使用最后一个回调来重复动画。

$(function () {
    var $header = $("#header");
    var header = ['I', 'Am', 'So', 'Cool'];
    var position = -1;

    !function loop() {
        position = (position + 1) % header.length;
        $header
            .html(header[position])
            .fadeIn(1000)
            .delay(1000)
            .fadeOut(1000, loop);
    }();
});

See it here.

【讨论】：

除了不需要.queue 函数，因为.html 调用始终是链中的第一个函数。
是的，因为重新排序
不过，您或许应该解释一下 IIFE。
太棒了。我喜欢你如何声明一个命名函数，然后用“！（）”递归执行它。这是我所见过的最有效的方法，并将其添加到我的心理工具包中。
@zipstory.com，是的，他们不一定需要匿名；）

【解决方案2】：

可以使用recurence，最后一个fadeOut完成后会执行repeat函数。

function repeat() {
    $("#header").hide();
    var headerOne='I';
    var headerTwo='Am'; 
    var headerThree='So';
    var headerFour='Cool';
    $("#header").html(headerOne);
    $("#header").fadeIn(1000);
    $('#header').delay(1000).fadeOut(1000,function() {
        $(this).html(headerTwo).fadeIn(1000);
        $('#header').delay(1000).fadeOut(1000,function() {
            $(this).html(headerThree).fadeIn(1000);
            $('#header').delay(1000).fadeOut(1000,function() {
                $(this).html(headerFour).fadeIn(1000).delay(1000).
                    fadeOut(1000, repeat); 
            });
        });
    });
}

$(document).ready(function() {
    repeat();
});

【讨论】：

或$(document).ready(repeat)，如果这是唯一被调用的函数
啊，是的，我忘记了更短的语法！ ;)

【解决方案3】：

创建一个递归自执行函数并将其用作最终回调：

附言冒昧地清理了你的代码。

$(function () {
    (function repeat() {
        var header = $("#header"),
            headerOne = 'I',
            headerTwo = 'Am',
            headerThree = 'So',
            headerFour = 'Cool';

        header.text(headerOne)
            .fadeIn(1000)
            .delay(1000)
            .fadeOut(1000, function () {
            header.text(headerTwo)
                .fadeIn(1000)
                .delay(1000)
                .fadeOut(1000, function () {
                header.text(headerThree)
                    .fadeIn(1000)
                    .delay(1000).fadeOut(1000, function () {
                    header.text(headerFour)
                        .fadeIn(1000)
                        .delay(1000)
                        .fadeOut(1000, repeat);
                });
            });
        });
    })();
});

【讨论】：

Alexander 在清理代码方面做得更好......除了一些小的语法差异之外，此代码与 jcubic 的代码相同。
@RyanComputerProgrammer 恕我直言，您接受了错误的答案。