How to stop link being followed until after jQuery .animate has complete?

Question

back story: I am designing a portfolio website for myself. on its home page, the logo is front and center but on the sub pages the logo is top & right.

I thought it would be a nice visual cue (upon clicking a link to a sub page) to use jQuery to animate the movement of the logo from the middle to the corner of the page.

the issue: the sub page loads faster than the animation completes.

question: is there some way to pause the link-following until after the animation has completed? ­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

You also need to return false or prevent the default action of the anchor click event otherwise the browser will just follow the href. Anyway agreed a live demo is better than 1000 words.

See a live demo here

e.g

 $('#myLink').click( function(ev){
   //prevent the default action of the event, this will stop the href in the anchor being followed
   //before the animation has started, u can also use return false;
   ev.preventDefault();
   //store a reference to the anchor tag
   var $self=$(this);
   //get the image and animate assuming the image is a direct child of the anchor, if not use .find
   $self.children('img').animate( {height:"10px"}, function(){
       //now get the anchor href and redirect the browser
       document.location = $self.attr('href');
   });
 });