如何使jQuery动画代码永远循环？

我试图创建一个循环的文本动画在一个滑块。。。 我试过了，但没用。。 你能告诉我如何永远循环这个脚本吗谢谢

<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>

$（文档）.ready（函数（）{
$（“#头”）.hide（）；
var headerOne='I'；
var headerTwo='Am'；
var headerThree='So'；
var headerFour='Cool'；
$（“#header”）.html（headerOne）；
$（“#标题”）.fadeIn（1000）；
$（'#header'）。延迟（1000）。淡出（1000，函数（）{
$（this.html（headerTwo.fadeIn）（1000）；
$（'#header'）。延迟（1000）。淡出（1000，函数（）{
$（this.html（headerThree.fadeIn）（1000）；
$（'#header'）。延迟（1000）。淡出（1000，函数（）{
$（this.html（headerFour）.fadeIn（1000）.delay（1000）.fadeOut（1000）；
});
});
});
});

---

谢谢

您可以使用重现，最后一个

fadeOut

将在完成时执行重复功能

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();
});

---

如果你稍微清理一下你的代码。您可以意识到，

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);
    }();
});

---

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

p、 美国冒昧地清理了你的代码

$(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);
                });
            });
        });
    })();
});

---

Setinterval可以帮助

Setinterval（“javascript函数”，毫秒）

@Bondye如果这是一个答案，它应该得到两张反对票——一张是将

setInterval

与jQuery动画混合，另一张是将字符串传递给

setInterval

。或

$（document）。ready（repeat）

，如果这是唯一被调用的函数的话。是的，我忘记了更短的语法！；）Alexander在清理代码方面做得更好。。。除了一些细微的语法差异外，此代码在其他方面与jcubic的代码相同。@RyanComputerProgrammer IMHO您接受了错误的答案。除了不需要使用

.queue

函数，因为

.html

调用始终是链中的第一个函数。是的，因为重新排序，你也许应该解释一下生活。好极了。我喜欢声明一个命名函数，然后用带递归的“！（）”执行它。这是我见过的最有效的方法，并将其添加到我的心理工具箱中。@zipstory.com，是的，它们不一定需要匿名；）