Perform operation once animation has finished

JavaScript
1

Hi there,

I’m looking for a way to load a page using document.location.href once an animation has finished, or even better load a webpage into a div once it has faded in, using jQuery.

At the moment I have a page with four links on it. Each one has its own id. When you click on one it adds a class to a relevant div, then animates to the top of the screen. The related div then fades in.

It all works great, but now I would like to use a gallery plug-in, which is where I’m struggling. I can set up the gallery on a new page, because then it is not affected by my script. I can load the new page using jQuery, but it loads as soon as the link is clicked, before the animation has had time to complete.

Here’s my script:


$(document).ready(function(){
$('#photocontent').load('galleryview.html');
 $("#proj").click(function(){
 $(this).addClass('title');
  $("#projcontent").addClass('selected');
 });
 $("#cv").click(function(){
  $(this).addClass('title');
  $("#cvcontent").addClass('selected');
 });
 $("#showreel").click(function(){
  $(this).addClass('title');
  $("#showreelcontent").addClass('selected');
 });
 $("h1").click(function(){
  $("h1").not(this).animate({opacity:0}, 1000).slideUp(1000, function(){
   $('.selected').fadeIn(1000);
  });
 });
 $(".menu").click(function(){
  $(".selected").fadeOut(1000, function(){
   $("h1").not(".title").slideDown(1000).animate({opacity:1}, 1000, function(){
    $(".selected").removeClass('selected');
    $(".title").removeClass('title');
   });
  });
 });
});

As you can see I’ve tried to load the page into the ‘photocontent’ div as soon as the page is ready, but when the div fades in, there is nothing there.

If I add the line:


$('#photo').click(function(){
 document.location.href = 'galleryview.html';
});

it will jump to the new page before the animation finishes.

Any help would be great.

Thanks in advance,
Mike

2

Most of the jquery methods which perform animation accept a callback function as an argument, which gets called automatically by jquery when the animation completes. This is useful when you want to do something after an animation completes. You’ve already used this feature multiple times in your code.