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

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

这段代码似乎运行正常(ish),当我点击链接中包含的图像'.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(),直接使用上面的函数.
• 除非您正在设置上下文,否则不要this在setTimeout()函数内部使用,否则this将是window,而不是您的clicked链接(这最终是您当前的问题).

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