用定時器切換兩個div？

Question

我有兩個div

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

而且在頁面加載時我想每個div都太 - >$('#squareone').animate({top: '1px'},1000); 的問題是 - 是否可以自動將這些兩個div之間切換時，一個帶有計時器的頁面加載可能或通過使用setInterval函數？

所以當頁面加載$('#squareone').animate({top: '1px'},1000);

然後2 secs後$('#squaretwo').animate({top: '1px'},1000);

，然後反覆20 sec？

謝謝！

Answer 1

嘗試做一個無限遞歸循環：如果你想在20秒後停止它

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

：

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($this){ 
    var $that = ($this.attr('id') === 'squareone' ? $('#squaretwo') : $('#squareone')); 

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

然後在頁面加載叫它並在通話中加入起始號碼：

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

這是因爲你是動畫1秒鐘，很明顯，如果你想要做的循環次數要改變它更快或更慢（count <= 40如果你做動畫500而不是1000，例如）。