우아한 jQuery 함수

저는 비교적 jQuery에 익숙하지 않습니다. 아래의 함수가 가능한 가장 우아한 방법을 만들 수 있는지 궁금합니다. 모든 정보를 매우 높이 평가합니다! 당신은우아한 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); 
});

출처

2011-03-11 iamwhitebox

귀하의 질문은 약간 주관적이며, _elegant_를 정의하십시오. 원하는 것을하기위한 가장 작은/가장 쉬운/최소한의 코드 금액 방법을 의미합니까? – gideon

끝에서 변수를 사용하여 click 이벤트를 처리하는 것 – iamwhitebox

나는 JQuery와 전문가가 아니에요,하지만 내가 이것에 대해 바꿀 것 몇 가지가있다.

나는 반복해서 DOM에서 동일한 개체와 상호 작용하고있어 경우에 나는 일반적으로 상수를 초기화보다는마다 선택

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

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

당신은 또한에 fadeOut를 수행 할 필요가 없습니다를 hide AFAIK. 그것은 불필요한 것입니다.

다른 애니메이션이 전환을 방해 할 수있는 경우 적절하게 stop()을 사용하십시오.

마지막으로, 이러한 전환의는 페이지의 다른 부분에서 호출 할 수있는 경우 또는 당신은 기능을 좀 더 읽기 I 함수를 정의 할 코드를 만들고 싶어하고 참조하는 경우 :

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

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

출처

2011-03-11 04:07:52 RSG

$(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); 
});

을

출처

2011-03-11 05:49:24 gnarf

우아한 jQuery 함수

답변

관련 문제