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 вызывает трижды функцию setTimeout, в результате чего весь процесс обрабатывается каждый раз, когда он запускается, и в конечном итоге вызывает конфликт.

Лучшее решение этой проблемы без изменения слишком много кода будет сделать это:

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