Javascript 使用Jquery正确设置多个元素的动画

可能我没有为我的问题选择最好的标题，对此我很抱歉

我对jQuery非常陌生，因此对动画也不熟悉。 我只是在尝试，但现在我有一个问题

脚本的工作方式与我所希望的一样，但似乎有点“错误”我打赌我的代码没有得到优化。。。另外，我可能用了一种错误的方式来实现我想要的

一个按钮触发脚本（它不应该像最后那样，但我暂时用这个按钮触发脚本），它就像一个“切换”，每次我点击“显示”，就会显示一堆HTML，并运行两个动画：

 $(".achievement_container").hide(300).show(); //shows the whole container
 $(".glow").fadeIn(100).fadeOut(800); // First "brightening" effect

这一个显示整个“帧”，而另一个动画运行以获得照明效果：

$(".ach_hover").css("left", "0px").css("opacity", "1").animate({
            left: "252px",
            opacity: "0"
        }, 1100);

您可以在此处看到一个“工作”示例：

我的问题出现在我多次单击“显示”按钮后，

$（“.ach\u hover”）

动画开始失败，并且根本没有出现。。。 我不满意我写这最后一部动画的方式，至少我认为可能有更好的“标准”方式来实现这一点

因此，我非常感谢jQuery专家对我的脚本进行“优化”，并避免任何错误行为的建议

提前感谢

尝试使用jQuery

停止匹配元素上当前正在运行的动画

---

试着像这样使用

.stop（）

你能给我解释一下.stop（）和我的脚本是如何工作的吗？所以我学到了一点：D，关于

$（“.ach\u hover”）

动画。。。你觉得怎么样？有没有办法写得“更好”或实际上还可以？当对元素调用.stop（）时，当前正在运行的动画（如果有）将停止。因此，在上一个动画停止之前，

.animate（）

不会启动。对于第二个问题，您可以组合css属性，请参阅更新的答案

$(".ach_hover")
 .css({
        "left": "0px",
        "opacity": "1"
 })
 .stop()
 .animate({
        left: "252px",
        opacity: "0"
}, 1100);