動畫后的jQuery延遲

Question

我目前在后退按鈕上附加了一個jQuery動畫，並且我正在使用bind命令來防止動畫完成之前加載下一頁。 不幸的是，即使使用bind命令，動畫仍然會很快被切斷。是否有任何方法可以確保動畫完全播放，或者是否可以在動畫之后但在下一頁加載之前增加延遲或暫停？

這是我的jQuery：

    $(document).ready(function () {
        $(".back").click(function () {
            $(".back")
                .addClass('magictime vanishOut')
                .bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {});
        });

});

Answer 1

我敢打賭，頁面轉換是back元素的click事件的默認操作。 您需要阻止默認操作，然后在動畫結束回調中觸發頁面過渡。

$(document).ready(function () {
    $(".back").click(function (e) {
        e.preventDefault();
        $(".back")
            .addClass('magictime vanishOut')
            .bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
            function () {
                // TODO fire off the page transition
            }
        );
    });
});

讓我知道它是如何工作的。