jQuery Delay After Animation

Question

I currently have a jQuery animation attached to a back button and I'm using the bind command to prevent the next page from loading before the animation completes. Sadly even with the bind command the animation still gets cut off pretty quickly.Is there any way to ensure the animation plays entirely or a way to add a delay or pause after the animation yet before the next page load?

Heres my jQuery:

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

});

Answer 1

I'm going to bet the page transition is the default action of the back element's click event. You need to prevent the default action and then fire off the page transition in the animation end callback.

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

Let me know how it works.