可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答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');
   });
 });

回答2:

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.

回答3:

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/

回答4:

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">LINK</a>

<img id="myImage" src="http://www.derekallard.com/img/post_resources/jquery_ui_cap.png"/>
</body>");

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

回答5:

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

回答6:

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.

回答7:

simply return false in the callback function.

回答8:

Not every website is the same. On a portfolio site - perfectly acceptable to have little animations and interface "cool", on a tool like Google search, if the logo animated every time before we could use the search bar it would be retarded.