setTimeout avec window.location et $ (this)

Question

Je suis relativement nouveau à ce sujet et je me demandais si quelqu'un pouvait me diriger dans la bonne direction! Je cherche à animer certains aspects du chargement de la page lorsque l'on clique sur les liens du menu.

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

Ce code semble fonctionner correctement (ish), lorsque je clique sur l'image « .nav_image », qui est contenu dans un lien, il efface le contenu du div « .page_box_fade » et réoriente en même temps à la Attribut 'href' du lien parent de .nav_image cliqué. Comme il y a un fondu de 300ms, je voudrais que le script inclue ceci avant qu'il ne redirige, pour rendre le fondu visible à l'utilisateur.

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

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

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

      return false;   
    }); 
}); 

Je suppose setTimeout serait la réponse, mais $ (this) .parent(). Attr ('href') est définie quand il est utilisé comme je pensais.

C'est la structure de mon html, un lien simple:

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

Toute aide sur ce serait très apprécié :)

Answer 1

Vous pouvez simplement stocker le href avant, comme ceci:

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

Cela fait quelques changements:

• "document" n'est pas correct pour un sélecteur, utilisez $(document).ready() ou le raccourci ci-dessus.
• En outre, ne pas passer une chaîne à setTimeout(), utilisez une fonction directement comme ci-dessus.
• Ne pas utiliser this dans la fonction setTimeout() sauf si vous configurez le contexte, sinon this sera window, pas votre lien clicked (ce qui est en fin de compte votre numéro actuel).

Une alternative est de rediriger juste au moment où vous faites face à (ça va Rediriger à 300ms cependant, pas 500ms), comme ceci:

$(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

Vous devez utiliser l'argument de rappel de fadeOut, qui est appelée lorsque l'animation est terminée:

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; 

    }); 
});