jquery - 如何使用 .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);
});