javascript - 使用 Jquery 正确地为多个元素设置动画

Question

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

我对 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);

你可以在这里看到一个“有效”的例子:

http://jsfiddle.net/Frondor/6EA6W/

我的问题出现了在我多次点击“显示”按钮之后，$(".ach_hover") 动画开始失败并且没有出现，根本... 我对我写最后这个动画的方式不满意，至少我认为可能有更好的和“标准”的方式来实现这一点。

因此，我非常感谢 jQuery 专家提出的“优化”我的脚本的任何建议，并避免其中出现任何错误行为。

提前致谢

Answer 1

尝试使用 jQuery .stop()

Stop the currently-running animation on the matched elements.

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

Fiddle