jquery navigate in code

Question

Hi trying to fade out elements on the page when a navigation link is clicked, then go to the clicked link:

$("#navigation a").click(function() {   
  var $clickobj = $this;  
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
        $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
          $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
     $clickobj.click();       
     });  
      });  
   });  
   return false;  
 });

but this just navigates straight away with the fade out...any ideas?

Answer 1

It's probably doing this because $this on your first line throws an undefined error and so ti'ts not executing the script, just erroring then continuing the normal anchor behavior. The $this should just be this without the $, like this:

$("#navigation a").click(function() {   
  var $clickobj = $(this).unbind('click');
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
    $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
      $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
        $clickobj.click();       
      });  
    });  
  });  
  return false;  
});

Also the .unbind() above removes this handler, so it won't loop.

Answer 2

The animation runs on a timer so you need to wait for that to finish. This code looks like it is going into a recursive loop, so rather call window.location once the third animation is finished:

$("#navigation a").click(function(e) {   
  var href = $(this).attr('href');
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
        $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
          $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
     window.location = href;       
     });  
      });  
   });  
   e.preventDefault();
 });