jquery - 遅延機能を動作させることができません

Question

CSSとjQueryでカードフリップを作ろうとしています。私が使用している状況では、前面はオーバーフローの非表示コンテナーにある必要があり、反転するとオーバーフローの可視コンテナーにある必要があります。

これが私の例です：

$('.front').click(function(){
    $('#card').toggleClass('flipped');
    $('.container').toggleClass('flippedContainer');
});
$('.back').click(function(){
    $('#card').toggleClass('flipped');
    $('.container').delay(500).toggleClass('flippedContainer');
})

http://jsfiddle.net/ANfuL/

お気づきのように、前から後ろへの移動は正常に機能しますが、トグルする前にクラスのトグルを 0.5 秒待つ必要があります。遅延を試みましたが、何もしないようです。

私に何ができる？

Answer 1

delayデフォルトでは、エフェクト キューでのみ機能します。setTimeout代わりに使用してみてください:

setTimeout(function(){$('.container').toggleClass('flippedContainer');},500);

Answer 2

コードを編集して、javascript の setTimeout メソッドを使用しました。ここで更新を確認できます。

http://jsfiddle.net/nickadeemus2002/fT8KJ/

$('.front').click(function(){
        $('#card').toggleClass('flipped');
        $('.container').toggleClass('flippedContainer');
    });
    $('.back').click(function(){
        //waits half second
        setTimeout(function(){
           $('#card').toggleClass('flipped');
           $('.container').delay(500).toggleClass('flippedContainer');
        },500);


        //$('#card').toggleClass('flipped');
        //$('.container').delay(500).toggleClass('flippedContainer');
    })

基本的に、setTimeout を追加して、「.back」クリック イベント ハンドラを変更しました。setTimeout で、元の .back コードを実装する関数を作成し、起動するまでに必要な時間を指定しました。

Answer 3

delayjQuery キューのアニメーション効果にのみ使用できます。

使用する必要がありますsetTimeout();

http://jsfiddle.net/ANfuL/5/