如何让这个 jQuery 动画代码永远循环? [英] How to make this jQuery animation code loop forever?

问题描述

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

i am trying to create a loop of text animations over a slider... i tried loop but it didnt work.. Can you please tell me how do i loop this script forever..thanks

<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.只需使用最后一个回调来重复动画.

If you clean your code a bit. You can realize that setInterval is not needed. Simply make use of the last callback to repeat the animation.

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

在这里查看.

这篇关于如何让这个 jQuery 动画代码永远循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！