Question

我今天一直在玩jQuery，我想知道我是否可以改进它。我注意到它有点慢而且不太顺畅。谁知道为什么？

我的jQuery

/ *查看切换* /

$(function(){
 $("#hide-top").toggle( 
  function() {
   $("#logo").fadeTo(1000,0,function(){
    $("#logo").animate({'height':'0'},'fast', function(){
     $("#logo").css("display", "none");
     $("#content").animate({'height':'86%'},'400');
     $("#hide-top").html('Show Top');
    });
   });
  },
  function() {
   $("#content").animate({'height':'70%'},'400', function(){
    $("#logo").animate({'height':'80px'},'fast');
    $("#logo").fadeTo(1000,1);
    $("#hide-top").html('Hide Top');
   });
 });

 $("#hide-right").toggle( 
  function() {
   $("#sidebar ul").fadeTo(1000,0,function(){
    $("#content").animate({'width':'96%'},'fast');
    $("#nav-bg").animate({'width':'96%'},'fast');
    $("#nav-bg").animate({'width':'96%'},'fast');
    $("#hide-right").html('Show Right');
   });
  },
  function() {
   $("#content").animate({'width':'77%'},'fast', function(){
    $("#nav-bg").animate({'width':'76%'},'fast');
    $("#sidebar ul").fadeTo(1000,1);
    $("#hide-right").html('Hide Right');
   });
  }
 );
});

Answer 1

有几件事：

缓存jQuery对象。每次执行$('selector')时，它都会从该选择器创建一个新的jQuery对象，这是一项非常昂贵的操作。缓存常用的jQuery对象，如下所示：

var logo = $('#logo');
var nav_bg = $('#nav_bg');

尽可能链。同样，链接使您的代码更清晰，更具表现力，同时必须避免重复调用jQuery函数。

$("#logo").animate({'height':'80px'},'fast').fadeTo(1000,1);

使用内置函数。由于jQuery已经拥有它们，为什么不使用它们呢？使用这些也使代码更具可读性。

// Your's
$("#logo").css("display", "none").fadeTo(1000,1);

// jQuery's
$('#logo').hide().fadeIn(1000);

最后一个真的取决于你为此做了什么，但是不要在脚本中硬编码。将它们放在变量中以便你可以改变它们，而不是当您需要更改时，必须找到并替换每个相同的值。

欢迎提出改进这个基本jQuery的建议

1 个答案: