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

Posted 2023-05-08

【中文标题】如何让这个 jQuery 动画代码永远循环？

【英文标题】：How to make this jQuery animation code loop forever?

【发布时间】：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);

【参考方案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 恕我直言，您接受了错误的答案。