2

我对此比较陌生,想知道是否有人能指出我正确的方向!我希望在单击菜单链接时为页面加载的某些方面设置动画。

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

对此的任何帮助将不胜感激:)

4

3 回答 3

4

您可以只存储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()thiswindowclicked

另一种方法是在你面朝外时重定向(它会在 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;           
  });
}); 
于 2010-11-08T18:13:33.893 回答
1

你需要使用fadeOut的回调参数,当动画完成时调用:

var link = this;
$('.page_box_fade').fadeOut('300', function() {
    window.location.href = $(link.parentNode).attr('href');
});
于 2010-11-08T18:15:56.723 回答
0
$(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;

  });
}); 
于 2010-11-08T18:23:41.477 回答