переключить два divs с таймером?

Question

У меня есть две дивов

<div id="squareone"></div> 
<div id="squaretwo"></div> 

И при загрузке страницы Я хочу, чтобы каждый Див тоже ->$('#squareone').animate({top: '1px'},1000); Возникает вопрос - Можно ли переключаться между этими двумя дивами автоматически при загрузке страницы, может быть, с помощью таймера или с помощью функции setInterval?

Так при загрузке страницы $('#squareone').animate({top: '1px'},1000);

, а затем 2 secs позже $('#squaretwo').animate({top: '1px'},1000);

, а затем повторно для 20 sec?

Спасибо!

Answer 1

Попробуйте сделать бесконечный рекурсивный цикл:

function toggleDivs($this){ 
    var $that = ($this.attr('id') === 'squareone' ? $('#squaretwo') : $('#squareone')); 

    $this.animate({top:1},1000,function(){ 
     toggleDivs($that); 
    }); 
} 

Затем на странице загрузки просто назвать его:

$(function(){ 
    toggleDivs($('#squareone')); 
}); 

Если вы хотите, чтобы остановить его через 20 секунд:

function toggleDivs($this,count){ 
    var $that = ($this.attr('id') === 'squareone' ? $('#squaretwo') : $('#squareone')); 

    $this.animate({top:1},1000,function(){ 
     if(count <= 20){ 
      count++; 
      toggleDivs($that,count); 
     } 
    }); 
} 

И просто введите начальный номер в звонок:

$(function(){ 
    toggleDivs($('#squareone'),1); 
}); 

Это потому, что вы анимировать в течение 1 секунды, очевидно, что число циклов изменится, если вы хотите сделать это быстрее или медленнее (count <= 40, если вы сделали анимацию для 500 вместо 1000, например).