Link doesn't let animation to end JQUERY

Question

I create a div that when is clicked it executes an jquery script, but the problem I have is that in the animation there is a link, when you click on the link the links is execute as well as the animation but it does not let the animation to end. Is there a way to let know Jquery that when the links its executed wait for the animation to end and then go to the link?

Answer 1

You need to handle the link's click event and record the click, then return false to prevent the navigation.

Then when the animation finishes, check whether you've recorded a click, and, if so, set location.href.

However, I don't recommend doing this. If a user clicked a link, he obviously wants to go to that page, and he's not interested in your animation.

Answer 2

You can use the callback param for the animate function:

$('a').click(function(){
    $(this).animate({}, 500, function() { location.href = $(this).attr('href') });
    return false;
});

This will execute the animation when the link is clicked and will go to the url once the animation has completed.