jQuery 스 니펫을 단축하려면 어떻게해야합니까?

Question

나는 발췌를 줄이기 위해 많은 노력을했지만 아무 것도 나를 위해 일하고 있지 않다. 여기

이된다

var logoTitle = $(".logoTitle"); 

logoTitle.children(".char3, .char4").delay(300).each(function() { 
    $(this).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 
}); 

logoTitle.children(".char2, .char5").delay(600).each(function() { 
    $(this).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 
}); 

logoTitle.children(".char1, .char6").delay(900).each(function() { 
    $(this).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 
}); 

어떻게이 짧은을하고 효율성을 높일 수 있습니까?

Answer 1

이 원래 스크립트처럼, 즉시 실행하려면 다음

(function animateLogoChildren(theChildren, theDelay){ 
    var logoTitle = $(".logoTitle"); 

    logoTitle.children(theChildren).delay(theDelay).each(function() { 
     $(this).animate({ 
      'margin-top':'0', 
      'opacity':'1' 
     }, 330, "easeOutQuart"); 
    }); 
})(".char3, .char4", 300); 

이 통화에서 실행하려면 :

function animateLogoChildren(theChildren, theDelay){ 
    var logoTitle = $(".logoTitle"); 

    logoTitle.children(theChildren).delay(theDelay).each(function() { 
     $(this).animate({ 
      'margin-top':'0', 
      'opacity':'1' 
     }, 330, "easeOutQuart"); 
    }); 
} 

animateLogoChildren(".char3, .char4", 300); 
animateLogoChildren(".char2, .char5", 600); 
animateLogoChildren(".char1, .char6", 900); 

두 번째는 가장 가능성이 당신이있어 무엇을 찾고, 어떻게 코드를 정리 주어진. 희망이 도움이!

Answer 2

각 기능이 필요하지 않습니다. 효율성에 대한 정의가 다운로드되면 더 효율적입니다. 그러나 속도를 현명하게 할 수는 없습니다.

는

var logoTitle = $(".logoTitle"); 

logoTitle.children(".char3, .char4").delay(300).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 
logoTitle.children(".char2, .char5").delay(600).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 
logoTitle.children(".char1, .char6").delay(900).animate({ 
     'margin-top':'0', 
     'opacity':'1' 
    }, 330, "easeOutQuart"); 

Answer 3

내가 좋아하는 코드의 재사용, 뭔가 허용하는 사용자 정의 애니메이션 기능을 만들기 위해 찾고있을 것 : 시도

var logoTitle = $(".logoTitle"); 

$.fn.myAnimate = function(delayTime) { 
    return $(this).delay(delayTime).each(function(){ 
     $(this).animate({ 
      'margin-top':'0', 
      'opacity':'1' 
     }, 330, "easeOutQuart"); 
    }) 
} 

logoTitle.children(".char3, .char4").myAnimate(300); 
logoTitle.children(".char2, .char5").myAnimate(600); 
logoTitle.children(".char1, .char6").myAnimate(900); 

Answer 4

이 :

var logoTitle = $(".logoTitle"); 

function animate_kids(kids, delay) { 
    kids.delay(delay).animate({ 
      'margin-top': 0, 
      'opacity': 1 
     }, 330, "easeOutQuart"); 
    }); 
}; 

animate_kids(logoTitle.children(".char3, .char4"), 300); 
animate_kids(logoTitle.children(".char2, .char5"), 600); 
animate_kids(logoTitle.children(".char1, .char6"), 900); 

내가 당신을 알고하자 질문이 있으십니까? 행운을 빕니다! :)