SetTimeout with .location and $ (this) window

Question

I am relatively new to this question and was wondering if anyone could point me in the right direction! I am looking to enliven some aspects of page loading by clicking on menu links.

$("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 works fine (ish), when I click on the ".nav_image" image that is contained in the link, it reduces the contents of the ".page_box_fade" div and is redirected to the "href" attribute from the .nav_image parent link click. Since there is a 300 ms attenuation, I would like the script to enable this before redirecting it to make the attenuation 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 that setTimeout will be the answer, but $ (this) .parent (). attr ('href') is undefined when used the way I thought.

html, :

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

:)

Answer 1

href , :

$(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;           
  });
}); 

:

• "document" , $(document).ready() .
• , setTimeout(), , .
• this setTimeout(), , this window, clicked ( ).

, ( 300 , 500 ), :

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

Answer 2

fadeOut, , :

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

Answer 3

$(function() {

  var work = false;
  $(".nav_image").click( function(ev){

    if (work)
       return false;

    work = true;

    var _this = this;

    $('.page_box_fade').fadeOut('300', function() {
       setTimeout(function(){
          window.location.href = $(_this).parent().attr('href');
       }, 500 );
    });

    return false;

  });
});