同じクラス名を共有するdivのjQueryアニメーション

Question

同じクラスを共有する特定のdivをアニメーション化できるかどうかを知りたいと思います。 divをクリックすると、アニメーションはクリックされたdiv内でのみ発生し、他のdivでは同時に発生しなくてはなりません。

はここで、これまでに私のコードです：

$(".js-wrapper-item").click(function() { 
    var box = $(this); 

    if ($('.js-wrapper-item').is(':animated')) { 
     return; 
    } 

    if ($(box).css('bottom') == '0px') { 
     $(box).stop().animate({ "bottom": "50px"}, 600); 
     $('.advantages-agency-text').stop().slideToggle(600);    
    } 

    else { 
     $(box).animate({"bottom": "0px"}, 600); 
     $('.advantages-agency-text').slideToggle(600); 
    } 
}); 

これまでのところ、私は別の名前を持っているdiv要素を持っていることによって正常に動作し、このコードを作ることができました。あなたは私が探しているものを達成するための方法についていくつか指摘してくれますか？どうもありがとう！

Answer 1

以下のように使用したイベントの委任：

$(document).on('click','.js-wrapper-item',function(){ 
    .... 
}); 

の代わり$(".js-wrapper-item").click(function(){。

さらに、ブロックをclickイベント内に書き込むときに$(this).is(':animated')){を使用できます。要素を$('.js-wrapper-item').is(':animated'))と再度参照する必要はありません。

var box = $(this)も必要ありません。同じクリックブロック内にある場合、$(box)の代わりに$(this)に直接電話をかけることができます。