setTimeout with window.location and $(this)

Question

i'm relatively new to this and was wondering if anyone could point me in the right direction! I'm looking to animate some aspects of the page loading when menu links are clicked.

$("document").ready( function() {

      $('.page_box_fade').css("display", "none")        
      .fadeIn('300');

      $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            document.location = $(this).parent().attr("href");

            return false;           
      });
}); 

This code appears to work fine(ish), when I click on the image '.nav_image', which is contained within a link, it fades the contents of div '.page_box_fade' and simultaneously redirects to the 'href' attribute of the clicked .nav_image's parent link. As there is a 300ms fade, I would like the script to include this before it redirects, to make the fade actually visible to the user.

$("document").ready( function() {

    $(".nav_image").click( function(){

            $('.page_box_fade').fadeOut('300');                                 
            setTimeout( "document.location = $(this).parent().attr('href')", 500 );

            return false;           
    });
}); 

I assume setTimeout would be the answer but $(this).parent().attr('href') is undefined when used the way I thought.

This is the structure of my html, a simple link:

<a href="?id=0">
    <img class="nav_image" src="images/home.png" alt="home" />
</a>

Any help on this would be much appreciated :)

Solution 1

You can just store the href before, like this:

$(function() {
  $(".nav_image").click( function(){
    $('.page_box_fade').fadeOut('300');                                 
    var href = $(this).parent().attr('href');
    setTimeout(function() { window.location.href = href; }, 500 );
    return false;           
  });
}); 

This makes a few changes:

• "document" isn't correct for a selector, use $(document).ready(), or the shortcut above.
• Also, don't pass a string to setTimeout(), use a function directly like above.
• Don't use this inside the setTimeout() function unless you're setting the context, otherwise this will be window, not your clicked link (which is ultimately your current issue).

An alternative is to just redirect when you face out (it'll redirect in 300ms though, not 500ms), like this:

$(function() {
  $(".nav_image").click( function(){                            
    var href = $(this).parent().attr('href');
    $('.page_box_fade').fadeOut('300', function() { 
      window.location.href = href; 
    });
    return false;           
  });
}); 

Solution 2

You need to use the callback argument of fadeOut, which is called when the animation is complete:

var link = this;
$('.page_box_fade').fadeOut('300', function() {
    window.location.href = $(link.parentNode).attr('href');
});