2

ドキュメントの準備ができたら、新しいクラス名を取得するボタンがありますframe1。2 秒後にこのボタンに別のクラスを設定したいと思います。

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

可能であれば、2 秒後に別のクラス「frame2」を追加したいですか?

4

3 に答える 3

2

追加するクラスがなくなるまで数秒ごとにクラスを追加したいだけの場合は、間隔を使用して、クラスがすべて追加されたときにそれをクリアできます。

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/

于 2012-09-25T18:13:33.753 に答える
1

このようにできます。 

$(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);
});
于 2012-09-25T18:05:51.463 に答える
0 
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);

ライブデモを参照

于 2012-09-25T18:05:37.647 に答える