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)。 $(this)而不是$(box)。

共享相同类名的div上的jQuery动画

1 个答案: