jquery在代码中导航

Question

当单击导航链接时，尝试淡出页面上的元素，然后转到单击的链接：

$("#navigation a").click(function() {   
  var $clickobj = $this;  
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
        $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
          $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
     $clickobj.click();       
     });  
      });  
   });  
   return false;  
 });

但这只是直接导航与fade out...any的想法？

Answer 1

它之所以这样做，可能是因为第一行的$this抛出了一个未定义的错误，所以它不会执行脚本，只是出错，然后继续正常的锚定行为。$this应该只是不带$的this，如下所示：

$("#navigation a").click(function() {   
  var $clickobj = $(this).unbind('click');
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
    $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
      $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
        $clickobj.click();       
      });  
    });  
  });  
  return false;  
});

此外，上面的.unbind()删除了这个处理程序，所以它不会循环。

Answer 2

动画在计时器上运行，所以您需要等待它完成。这段代码看起来像是进入了一个递归循环，所以在第三个动画结束后调用window.location：

$("#navigation a").click(function(e) {   
  var href = $(this).attr('href');
  $("div#content").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow',function(){  
        $("div#navigation").animate({opacity: 'toggle', paddingTop: '0px'}, 'slow', function(){  
          $("div#logo").animate({opacity: 'toggle', paddingTop: '0px'}, 900, function(){  
     window.location = href;       
     });  
      });  
   });  
   e.preventDefault();
 });