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 should be able to use the animate function listed here: (jquery doc)

It says that the callback should not be executed until the animation is complete.

callback (Optional) Function A function to be executed whenever the animation completes, executes once for each element animated against.

Answer 2

Try this:

 $("#thelink").click( function(){
  $(this).animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $(this).attr('href');  
  });
 });

Or when the link is not animated but the image (as your question states):

 $("#thelink").click( function(){
  $("#theImg").animate( { animation stuff }, "medium", "easeboth", function(){
    document.location = $("thelink").attr('href');  
  });
 });

Answer 3

so.. im quite a javascript/jquery novice and i can't make heads or tails of this part of Pim's answer:

print("document.location = $("thelink").attr('href'); ");

i tried the following, but it doesn't seem to be right:

print("document.location = $("http://example.com").attr('href'); ");

i think what i need is an example that doesn't require filling-in.
i.e. an example that already works that i can tinker with to figure out. or something more clearly commented. :)

i just don't have the mad jquery skills to understand what information i need to replace. :)

Answer 4

Hi Jon, 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');
   });
 });

Answer 5

I know you probably don't want to hear this but what you are doing is a big no-no in terms of usability.

You want to create a cool effect and in so doing slow down your user's experience. Nowadays web visitors are very busy and when they click on a link they want to get there asap. You will lose a percentage of visitors in the process and will aggravate many others just for the sake of a little visual candy.

Answer 6

@allesklar:

thanks for your feedback, i was considering this point as well... here are my thoughts:

1) there is a subtle but real usability issue inherent in changing the location of the menu and so i think that, if done effectively, this technique can actually increase usability 2) i am planning on making the animation quite fast, we're talking like a single second or less. my goal is to play around with all the timing parameters until it simply increases the flow of the site rather than creating any frustrating sluggishness. 3) the site in general will be quite light and so the load time after the animation completes will be short 2) it is a portfolio, so i am trying to razzle dazzle a bit .. i realize that usability is as important (or more) here as anywhere, but in light of the above, i think the razzle dazzle ends up being a bonus. 4) i hate long intros as much as anyone ;)

that said, its a valid point and once i see the effect in action in my own site i may decide that i am unable to turn the balance in favour of this little trick! :)

thanks to everyone for your help !

Answer 7

just in case anyone is interested in this variation...

i wanted the link itself to be separate from the image that is animated, i tinkered with the code a bit and now i have that working.

the javascript/jquery:

print(" $(function()
    {
        $('#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 referene to the anchor tag
            var $self=$('img#myImage');
            var $link=$('a#myLink');
            //get the image and animate
            ($self).animate( {height:"10px"}, function(){
                //now get the anchor href and redirect the browser
                document.location = $link.attr('href');
            });
        });
    });

");

the markup:

print("<body>
<a id="myLink" href="http://www.google.co.uk"&gt;LINK&lt;/a&gt;

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/&gt;

");

that said, i likely ugly'd up the code. so my apologies there.

Answer 8

No need to write any functions, just use the built-in jQuery event method event.preventDefault() (this was perhaps not available at the time this question was posted).

http://api.jquery.com/event.preventDefault/