如何讓這個jQuery動畫代碼循環永久？

Question

我試圖通過滑塊來創建文本動畫的環... 我嘗試循環，但它沒有工作.. 你能告訴我怎麼做我這個循環腳本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> 

謝謝！

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

Answer 2

您可以使用recurence，最後的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(); 
}); 

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