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] ...
});

您也无需关注fadeOut AFAIK hide。这是多余的。

如果其他动画可能会干扰转换，请使用stop()。

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

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

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

优雅的jQuery功能

2 个答案: