jquery - setTimeout 与 window.location 和 $(this)

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”的内容，并同时重定向到“href”属性单击的 .nav_image 的父链接。由于有 300 毫秒的淡入淡出，我希望脚本在重定向之前包含此内容，以使用户实际上可以看到淡入淡出。

$("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 将是 窗口，而不是您点击的链接(这最终是您当前的问题)。

另一种方法是在您面向外时重定向(不过它会在 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;           
  });
});