如何使用 .addClass 开始动画，有多个 div 和动画

Question

我有两个单独的图像（.one 和 .two）和动画（.slide 和 .rotate），但是当我使用 .addClass 时，它们都播放相同的动画...就好像我没有关闭我的 css 它认为它们是一样的？

这是我的.js

$(".one").click(function(){
    $(this).toggleClass("rotate");
    $(this).css("zIndex", 1);
});

$(".two").click(function(){
    $(this).toggleClass("slide");
    $(this).css("zIndex", 1);
});

我是否正确使用了'zIndex 函数来使活动动画与其他所有内容重叠？

如果您想看我的 .css 文档，请告诉我，只是动画非常大。

Answer 1

远离toggleClass，因为它增加了使用前不知道状态的错误来源。

您还必须设置另一个 div 的 z-index，因此当您先单击 .one，然后单击 .two 时，它们的 z-index 不会都为 1。

$(".one").click(function(){
    $(this).addClass("rotate").css("z-index", 1);
    $(".two").removeClass("slide").css("z-index", 0);
});

$(".two").click(function(){
    $(this).addClass("slide").css("z-index", 1);
    $(".one").removeClass("rotate").css("z-index", 0);
});

如何使用 .addClass 开始动画，有多个 div 和动画

How to use .addClass to begin animation, with multiple divs and animations

css

jquery

animation