How to avoid following clicked link without removing the "href" attribute

Question

I need to delay a little bit redirection to a new page after clicking on certain links.

Right now I'm using following jQuery:

$('.menu-element a').click(function(){
    var src = $(this).attr('href');
    $(this).removeAttr('href');             
    anim(src);
})

And it works fine. It runs really short animation and after that redirects to clicked page.

But I would like to keep the href attribute of link (i.e. in case when someone clicks twice very fast).

when I add $(this).attr('href', src); at the end of code listed above, it doesn't wait for animation to finish only redirects to new page right after clicking on the link.

How can I preserve the href property and avoid the page being redirected to new address by it?

Answer 1

add return false into your function. This prevents the browser following the link's href, and is then up to you to make that redirect in your javascript. e.g. by adding something to the end of your anim() function that updates the location.

It also means you don't need to remove the href from the link.

$('.menu-element a').click(function(){
    var src = $(this).attr('href');
    anim(src);
    return false;
})