。每個（）函數與每次迭代之間的間隔

不確定是否可能。這個想法是非常基本的，onload按鈕開始短時間間隔地改變其背景，然後重複。我有一個像元素的列表：。每個（）函數與每次迭代之間的間隔

<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) 
});

然後直到檢測到鼠標懸停事件簡單地重複它。

任何人都可以提出一種方法來做到這一點？謝謝。

來源

2011-12-05 devjs11

我覺得你跟的setTimeout（） – Andy

下面是一個例子：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/

來源

2011-12-05 16:06:01 Neal

嗨，你的版本正是我想要實現的。雖然我有一個問題。爲什麼我的最後一行不去除班級？請看看http://jsfiddle.net/gMDEM/ – devjs11

@Alex多數民衆贊成bc的第一個元素沒有'.prev（）'讓我更新它。等一下。 – Neal

@Alex - 這裏是一個更新：http://jsfiddle.net/maniator/gMDEM/4/ :-D – Neal

我不知道我是否明白你想要做什麼。這會工作嗎？

var element = $('.button');   

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

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

    });

因此，每個間隔將與差1秒開始。

我理解對不對？

來源

2011-12-05 15:59:49 Chango

更好，我認爲外呼應該是的setTimeout或情況會很瘋狂！但我不確定OP是否真的想要一個setInterval ... –

Ups！你是對的！它是一個setTimeout，謝謝！ – Chango

如果你只想要的效果發生一次，你應該使用setTimeout不setInterval。 setInterval設置了一個重複事件。也許你應該嘗試像...

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


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

來源

2011-12-05 16:00:21

我會說，你應該爲每個按鈕使用不同的時間間隔。此外，最好是使用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); 
    });

來源

2011-12-05 16:03:40

。每個（）函數與每次迭代之間的間隔

回答

相關問題