带有window.location和$( setTimeout )的window.location

Question

我对此比较陌生，不知道是否有人能给我指出正确的方向！我希望当菜单链接被点击时，页面加载的一些方面的动画。

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

当我点击包含在链接中的图像'.nav_ image‘时，这段代码似乎工作得很好，它淡出div '.page_box_fade’的内容，同时重定向到被点击的.nav_image父链接的'href‘属性。由于有一个300ms的淡入淡出，我希望脚本包括这之前，它重定向，使淡入淡出实际可见的用户。

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

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

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

            return false;           
    });
}); 

我想答案应该是setTimeout，但是当按照我所想的方式使用时，$(this).parent().attr('href')是未定义的。

这是我的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()，直接使用上述函数。
• 除非设置上下文，否则不要在setTimeout()函数中使用this，否则this将是window，而不是您的<代码>D15链接(这最终是您当前的问题)。

另一种选择是在你面向外时重定向(它将在300ms内重定向，而不是500ms)，如下所示：

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

  });
});