javascript - 如何通过计时器更改jQuery中按钮上的几个css类？

Question

文档准备好后，有一个按钮可以获取新的类名frame1。我想在两秒钟后在这个按钮上设置另一个类。

$(document).ready(function () { 
    setTimeout(function () {
        $('#button').addClass('frame1')
    }, 2000);
});

如果可能的话，我想在两秒钟后添加另一个类“frame2”吗？

Answer 1

如果您只想每隔几秒钟添加一个类，直到您没有更多要添加的类，您可以使用一个间隔，然后在所有类都添加后清除它：

var group = [ 'whiteFG', 'redBG' ];
var intvl= setInterval(function(){
    group.length 
        ? $("#foo").addClass(group.pop()) 
        : clearInterval(intvl) ;
}, 2000);

小提琴：http: //jsfiddle.net/EvXPy/

或者您可以简单地遍历您的类名数组并从那里设置超时：

$(['redBG','whiteFG']).each(function(i,o){
    setTimeout(function(){
        $("#foo").addClass(o);
    }, i * 2000 );
});​​​​​​​​

请注意，第一个效果将立即运行，因为i它等于 的索引0，这意味着超时会立即发生。如果您希望延迟此时间，您可以i在乘以 2000 之前按您认为合适的方式递增。

小提琴：http: //jsfiddle.net/EvXPy/1/

Answer 2

你可以这样做。

$(document).ready(function () { 
  setTimeout(frame1(), 2000);
});
function frame1() {
  $('#button').addClass('frame1');
  setTimeout(frame2(), 2000);
}
function frame2() {
  $('#button').addClass('frame2');
}

或者你可以这样做。

$(document).ready(function () { 
  setTimeout(function () {
    $('#button').addClass('frame1')
  }, 2000);
  setTimeout(function () {
    $('#button').addClass('frame2')
  }, 4000);
});

Answer 3

setTimeout(function () {
        $('#button').addClass('frame1');
}, 2000);
setTimeout(function () {
        $('#button').addClass('frame2');
}, 2000);

更新：

如果要检查类是否存在，请这样做。

setTimeout(function () { 
    $('#button').addClass('frame1');
    if($('#button').hasClass('frame1')) { 
        setTimeout(function () {
            $('#button').removeClass('frame1').addClass('frame2'); 
        }, 2000); 
    }   
}, 2000);

参考现场演示