javascript - 盒子自动从左向右滑动

Question

我有三个盒子，现在它们都在按我预期的方式工作。但是，我需要每 30 秒自动执行一次这项工作，而无需“点击”事件。请看这个 fiddle http://jsfiddle.net/ykbgT/8493/ .有什么想法吗？

代码如下

<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>

$('.box').click(function () {
    $('.box').each(function () {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        } else if ($(this).offset().left > $('.box').width()) {
            $(this).animate({
                left: '50%',
            }, 500);
        } else {
            $(this).animate({
                left: '-150%',
            }, 500);
        }
    });
});

Answer 1

您可以使用名为 setinterval() 的 javascript 方法；

setInterval() - executes a function, over and over again, at specified time intervals.

JSFIDDLE DEMO

setInterval(function(){
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        } else if ($(this).offset().left > $('.box').width()) {
            $(this).animate({
                left: '50%',
            }, 500 );
        } else {
            $(this).animate({
                left: '-150%',
            }, 500 );
        }
    });
}, 30000);