javascript - 动画后的 jQuery 延迟

Question

我目前有一个附加到后退按钮的 jQuery 动画，并且我正在使用绑定(bind)命令来防止在动画完成之前加载下一页。遗憾的是，即使使用绑定(bind)命令，动画仍然很快被切断。有没有办法确保动画完全播放，或者有办法在动画之后、下一页加载之前添加延迟或暂停？

这是我的 jQuery:

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

});

Answer 1

我敢打赌页面转换是后退元素的单击事件的默认操作。您需要阻止默认操作，然后在动画结束回调中触发页面转换。

$(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
            }
        );
    });
});

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