优雅的jQuery函数

Question

我对jQuery比较陌生，我想知道我做的下面的函数是不是以最优雅的方式生成的？任何信息都是非常感谢的！谢谢

 $(function(){
        $('#enter').click(function() {
            $('#enter').fadeOut(80, function () {
            $('#enter').hide( function () { 
            $('#overlay').fadeIn(1500, function () {
            $("#loading").show().delay(500);
            $("#loading").hide( function(){ $("#s5").show(); });
            return false;

        });
    });
    });
        $('#slideTop').animate({ 
            marginTop: '-=230'   
        }, 500, function() {
    });
        $('#slideBottom').animate({ 
            marginBottom: '-=333',
        }, 500, function() {
    });

        });
    });

我应该让它像这样开始吗：

$(function(){
var cintro = function(){
    $('#box').click(function(){
        $(this).slideUp(
            {duration:1000}//2000,easing:"easeOutBounce"
        );
    setTimeout(function(){
        ('#box').slideUp(
            {duration:1000}//2000
        );}, 6000);
    //$('#box').css({'display': 'block'}).click(function(){$(this).css('display', 'none');
});
    $('#slidenav').slideDown({duration:2000,easing:"easeOutBounce"});
    $('#slider1').data('AnythingSlider').startStop(true);
}
$('#enter').click(cintro);
});

Answer 1

$(function(){
  // cache some selectors that won't ever change
  var enter = $( '#enter' ),
      overlay = $( '#overlay' ),
      loading = $( '#loading' ),
      s5 = $( '#s5' ),
      slideTop = $( '#slideTop' ),
      slideBottom = $( '#slideBottom' );

  enter.click(function() {
    enter.fadeOut(80, function() {
      // i don't think you really need this .hide() but you might...
      enter.hide();
      overlay.fadeIn(1500, function() {
        loading.show().delay(500).hide('slow', function() {
          $("#s5").show();
        })
      });
    });
    return false;
  });

  slideTop.animate({ 
    marginTop: '-=230'   
  }, 500);
  slideBottom.animate({
    marginBottom: '-=333',
  }, 500);
});

Answer 2

我不是JQuery专家，但是有几件事我需要改变。

如果我一次又一次地与DOM中的同一对象交互，我通常会用一个常量来初始化它，而不是每次都选择它：

var $ENTER_BUTTON = null;
...[other elements]...

$(document).ready(function(){
  $ENTER_BUTTON = $('#enter');
  ... [etc] ...
});

你也不需要跟随带有hide AFAIK的fadeOut。这是多余的。

如果其他动画可能会干扰过渡，请适当使用stop()。

最后，如果这些转换中的任何一个可以从页面的其他部分调用，或者如果你想让你的代码更具可读性，我会定义一个函数并引用这个函数：

function enterAnimation(){
  $ENTER_BUTTON.fadeOut(80,function(){
  ... etc
}    

$(document).ready(function(){
  $ENTER_BUTTON = $('#enter');
  ... [etc] ...
  $ENTER_BUTTON.click(enterAnimation);
});