共享相同类名的 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

像下面这样使用事件委托(delegate):

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

代替 $(".js-wrapper-item").click(function (){.

此外，当您在点击事件中编写该 block 时，您可以使用 $(this).is(':animated')){。您不需要再次将该元素引用为 $('.js-wrapper-item').is(':animated'))。

您也不需要 var box = $(this)。当它在同一个点击 block 中时，您可以直接调用 $(this) 而不是 $(box)。