On a site I recently worked on I wanted to have an animation before the next page loaded. What I wanted to happen was: user clicks a link, animation plays out, page is loaded normally. It is a nice little effect, but this is probably a trick you want to use sparingly…please…use it sparingly.
This uses the delay, and easing plugins for jquery. The below example includes the animation just as an example.
$('#link').click(function(){
// Get the url of the link
var toLoad = $(this).attr('href');
// Do some stuff
$(this).animate({
marginRight: '50px',
marginLeft: '-175px'
}, 300, 'easeOutSine').animate({
marginRight: '-38px',
marginLeft: '-120px'
}, 500, 'easeOutBounce');
// Stop doing stuff
// Wait 700ms before loading the url
$(this).delay(700, function(){
window.location = toLoad;
});
// Don't let the link do its natural thing
return false;
});
14 Comments
Leave a CommentPerfect. This was exactly what I needed for a project I’m working on. Thanks very much.
28th Apr 2009
Thanks for sharing, using it on a splash page for a client.
8th Jan 2010
This is exactly what I need for a job I’m working on, but I can’t get it to work… instead of the next page loading after the animation finishes, I get a browser message saying the address is undefined. I’m a bit of a novice with scripts – can you help?
25th Feb 2010
Don’t worry – I’ve sorted it now.
Thanks for the share.
25th Feb 2010
any reason you for not use setTimeout() function?
18th Mar 2010
The delay plugin wrapped setTimeout() so I could chain it like other jQuery methods. Looks like the delay plugin uses a timer now though.
19th Mar 2010
Hey guys not working for me: This is my code: The pages change instantly and the animation does not work:
$(“#nav ul li a”).click(function(event){
var toLoad = $(this).attr(‘href’);
var selectedLink = $(this);
var linkPosition = selectedLink.position();
var selectedLinkLeft = linkPosition.left;
$(“.circle”).animate( {“left”: + selectedLinkLeft}, “100″ );
$(this).delay(900, function(){ window.location = toLoad; });
return false;
});
12th Jun 2010
Do you get any errors in the console? Are you loading the jQuery library and wrapping the code in:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
12th Jun 2010
I am doing exactly that but it’s not working :-(
14th Jun 2010
You can view my test site on:
http://www.awais-muzaffar.co.uk/test/index.php
The animation kind of works now, but when you click on on menu link the new page loads instantly instead of waiting for the animation to end. Check out my link you will see what I mean.
14th Jun 2010
You aren’t loading the Delay plugin, this is confusing because jQuery now has a delay function but it’s different.
If the delay plugin doesn’t work replace that bit of code with:
setTimeout("window.location = toLoad" , 700);
14th Jun 2010
I struggled with this and found 2 issues using Safari 4.0.5 and wordpress.
1) I need to use JQuery instead of $
2) I need to use ” instead of ‘. (‘#link’) is not recognized while (“#link”) does.
3) if using setTimeout, the var toLoad; has to be global rather than inside the jQuery declaration.
22nd Sep 2010
1. You could do
jQuery(document).ready(function($) { //$code });if you wanted to use the $ sign.2. Single quotes shouldn’t matter, have no clue about that. Is that the same with any of your jQuery code?
3. You might be able to do
setTimeout(function(){window.location = toLoad}, 700)22nd Sep 2010
Ok. I found 3 thinks :)
22nd Sep 2010