使用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()

在匹配的元素上停止當前正在運行的動畫。

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