0

要素を反転して数秒後に元に戻すjQuery関数がありますが、同じ「flip」タグを持つ複数の要素があり、setInterval要素は最初のクリック後にすべての要素を元に戻します。フリップ効果を実装して、ある種のフローでクリックされた要素のみを回転させ、遅延後にすべての要素がフリップするわけではないようにするにはどうすればよいですか。コードは次のとおりです。

$(document).ready(function() {

    $('.click').toggle(function() //on click functions => toggle elements
    {           

        setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $('.flip').trigger('click');
        }, 1500) 

        $this = $(this);
        $this.addClass('flip');
        $this.children('.front').delay(600).hide(0);
        $this.children('.back').delay(600).show(0);

    },          
        function() 
        {

        $this = $(this);
        $this.removeClass('flip');
        $this.children('.front').delay(600).show(0);
        $this.children('.back').delay(600).hide(0);

        });  
});

私の意図は、要素が遅延後に反転することですが、クリックされたすべての要素は、時間（遅延）の間だけ表示されていても、遅延後に反転します。これが理にかなっていることを願っています:)

助けてくれたThnx！

4

2 に答える 2

1

$(this)またはを使用して、thisクリックされている現在のアイテムを参照します。また、追加の関数は必要ありませんtoggleClass()。クラスを適用/削除するために使用するだけです。

$('.click').click(function() //on click functions => toggle elements
{           

    var $this = $(this);
    setTimeout( function() { // trigger the flip-back after delay (1500ms)
        $this.trigger('click');
    }, 1500);

    $this.toggleClass('flip');
    $this.children('.front').delay(600).hide(0);
    $this.children('.back').delay(600).show(0);

});
于 2012-05-31T12:33:23.707 に答える
0

私は実際にはそれを理解していませんが、これは同じことをするべきではありません：

$('.click').on('click', function() {
    $(this).addClass('flip').children('.front, .back')
           .delay(600).toggle(0).delay(1500).toggle(0, function() {
               $(this).parent().removeClass('flip');
           });
});

フィドル

于 2012-05-31T12:28:55.870 に答える