的Javascript setTimeout函數問題

Question

我有一個測試頁http://www.emoceanstudios.com.au/test.php，這裏是相關的腳本：

<script type="text/javascript"> 
function slide_out(){ 
    $('#red-block').animate({ 
     marginLeft: -278 
    }, 500); 
    $('#yellow-block').animate({ 
     marginTop: -316 
    }, 500);  
    $('#gray-block').animate({ 
     marginLeft: 278 
    }, 500, function(){ 
     $('#three-color-container').fadeOut(500, function() { 
      $('#three-color-container-new').fadeIn(500, function() { 
       window.setTimeout(function(){slide_in()}, 4000); 
      }); 
     }); 
    }); 
} 
function slide_in(){ 
    $('#three-color-container-new').fadeOut(500, function() { 
     $('#three-color-container').fadeIn(500, function(){ 
      $('#red-block, #yellow-block, #gray-block').animate({ 
       marginLeft: 0, 
       marginTop: 0 
      }, 500, function() { 
       window.setTimeout(function(){slide_out()}, 4000); 
      }); 
     }); 
    }); 
} 

window.setTimeout(function(){slide_out()}, 4000); 
</script> 

現在紅色黃色灰色色塊滑動這樣的： 出，輸入，輸出，輸入，輸出和然後閃光（這不是我想要的），只能工作兩個半循環。 如果我將計時器從4000設置爲6000，則它最多可以運行3個循環，然後也會中斷。

我想要它出去，進出出入出入出出入出出入出出入出出入......永遠 我想該問題可能在setTimeout函數中。

Answer 1

#red-block, #yellow-block, #gray-block您的#red-block, #yellow-block, #gray-block動畫正在調用setTimeout函數三次，導致整個過程在每次運行時都重複三次，最終導致衝突。

該最佳的解決方案，而不改變太多的代碼將是做到這一點：

$('#red-block, #yellow-block').animate({marginLeft:0,marginTop:0},500); 
$('#gray-block').animate({marginLeft:0,marginTop:0,500,function() {setTimeout(slide_out,4000);});