Question

我有两个Div

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

当页面加载时我也想要每个div - ＆gt; $('#squareone').animate({top: '1px'},1000); 问题是 - 当页面加载时可能使用计时器或使用setInterval函数时，是否可以自动在这两个div之间切换？

所以当页面加载$('#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做了动画而不是{{1}例如）。

用计时器切换两个div？

1 个答案: