Question

This seems so tricky to me that I think I am overlooking something simple here. Can you help me find it?

Basically, the situation is this (variables where the name is not important are named with a capital letter) :

$('a').filter('somecriteria').each(function() {     var self = $(this);     self.click(function() {         B.animate({ something: somevalue }, { duration: 'fast', complete: function(){                 return true; // <--- see notes below              }           });         return false;     }); }); 

Notes: How can I let this return be the return that is sent from click() so that the user is taken to the new page only after animate() has fully completed (NB: in my real code I have three animate()’s chained together). I need to do this because the animation is cut off and the new page is loaded prematurely. The animation only comes to full effect when return false is sent from click() until the animation really ends.

I tried capturing the href attribute of the link and doing a window.location = capturedlink instead of return true. This works, but if possible I want to avoid that because some people have disabled changing location because of security concerns.

Or is there another way of keeping jQuery changing to a new URL in the middle of an animation?

Thank you very much for checking out this question.

Andre

Answer 1

I’m afraid capturing the href way would be the most obvious way of doing what you want. I am not sure if doing the following would circumvent people that disabled changing location in their security settings, but you could try it:

$('a').filter('somecriteria').each(function() {     var self = $(this);     self.click(function() {         if(self.hasClass('animated')) return true; // return true if already animated         B.animate({ something: somevalue }, { duration: 'fast', complete: function(){                 self.addClass('animated').click(); // fire the click event             }           });         return false;     }); });