Question

不确定是否可行。这个想法是非常基本的，按钮列表开始以较短的间隔改变其背景，然后重复。我有一个元素列表，如：

<div class="container">    
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
</div>

接下来我想逐个操作它，改变背景并以短间隔传递给下一个。问题是它会立即对所有这些应用更改。

这是我的方式：

var element = $('.button');         

element.each(function(){
    var thisObj = $(this);

    setInterval(function(){
        thisObj.css({
            'background':'#000'
        })
    }, 1000)
});

然后简单地重复它直到检测到鼠标悬停事件。

有人可以建议一种方法吗？谢谢。

Answer 1

我不知道我是否明白你想做什么。这会有用吗？

var element = $('.button');         

    element.each(function(index){
        var thisObj = $(this);

        setTimeout(function(){
          setInterval(function(){
              thisObj.css({
                  'background':'#000'
              })
          },1000);
        },1000 * index);

    });

因此每个间隔将以1秒的差异开始。

我明白了吗？

Answer 2

以下是一个示例：http://jsfiddle.net/maniator/S7C9h/

随之而来的一些代码：

var buttons = $('.button'),
    buttons_length = buttons.length;

function sliiide(index, interval){
    var button = buttons.eq(index%buttons_length);
    if(button.css('background-color') == 'rgb(0, 0, 255)'){ //blue
        button.css({
            background: 'white'
        });
    }
    else {
        button.css({
            background: 'blue'
        });
    }

    setTimeout(function(){
        sliiide(++index, interval);
    }, interval)
}


sliiide(0, 500);

这使用setTimeout 代替 setInterval来减少超时事件的冒泡。

根据您的评论更新：http://jsfiddle.net/maniator/gMDEM/4/

Answer 3

如果您只想在setTimeout而不是setInterval后使用该效果。 setInterval设置重复事件。也许你应该尝试类似......

var element = $('.button');         
    var offsetTime = 1000;
    element.each(function(){
        var thisObj = $(this);


        setInterval(function(){
            thisObj.css({
                'background':'#000'
            })
        },offsetTime)
        offsetTime += 1000;
    });

Answer 4

我想说，你应该为每个按钮使用不同的间隔。另外，最好使用setTimeout而不是setInterval，因为后者会导致性能问题：

   var $element = $('.button');         

    $element.each(function(index, button){
        var $button = $(button);

        setTimeout(function changeColor(){
                    $button.css({'background':'#000'});
                    setTimeout(changeColor, 1000);
        }, 1000*index);
    });

.each（）函数，每次迭代之间有间隔

4 个答案: