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()，直接使用上面的函数。
除非您设置了上下文，否则请勿在{{1}}函数中使用this，否则setTimeout()将是this，而不是window链接（这最终是你当前的问题）。

另一种方法是在面向外时重定向（它将在300毫秒内重定向，而不是500毫秒），如下所示：

clicked

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;

  });
});

带有window.location和$（this）的setTimeout

3 个答案: