jQuery 애니메이션을 어떻게 단순화 할 수 있습니까?

Question

jQuery 애니메이션을 어떻게 단순화 할 수 있습니까? 가장 좋은 방법은 무엇입니까?

코드 :

$("#nav").animate({opacity:0.2},1000); 
$("#sub_nav").animate({opacity:0.2},1000); 
$("#user_links").animate({opacity:0.2},1000); 
$("#logo").animate({opacity:0.2},1000); 
$(".top_buttons").animate({opacity:0.2},1000); 
$(".pageheaders").animate({opacity:0.2},1000); 
$(".heading_sub_text").animate({opacity:0.2},1000); 
$("#copyright").animate({opacity:0.2},1000); 
$("#footer_links").animate({opacity:0.2},1000); 

Answer 1

중 하나는 각 요소를 클래스 (또는 추가 클래스를) 제공 : 쉼표로 구분 한 선택에

$('.someNewClass').animate({opacity:0.2},1000); 

또는 배치 모든 요소.

$("#nav,#sub_nav,#user_links,#logo,.top_buttons,.pageheaders,.heading_sub_text,#copyright,#footer_links").animate({opacity:0.2},1000); 

또는이 두 가지를 조합하여 현재 클래스가없는 클래스 만 추가하십시오.

// These get .someNewClass: #nav,#sub_nav,#user_links,#logo,#copyright,#footer_links 
$(".someNewClass,.top_buttons,.pageheaders,.heading_sub_text").animate({opacity:0.2},1000); 

Answer 2

그것은 당신이 요소의 그룹을 애니메이션 것을 표시하기 때문에, 당신이 가능 사업부에 그들 모두를 포장하고 그냥 DIV 애니메이션을 수 있을까?

필요에 따라 jQuery Tools' Expose 기능을 살펴볼 수도 있습니다. 기본적으로 배경을 어둡게하고 특정 객체를 강조 표시 (또는 노출)합니다. 또한 오버레이 도구를 사용하면 더 많은 작업을 수행 할 수 있습니다.

Answer 3

patrick dw가 제안하는 것은 실질적으로 jQuery 코드를 정리합니다. 그의 제안 중 첫 번째 것을 가장 좋습니다. 그러나 선택자/효과 최적화 (미용 개선 이상)를 강조하는 것이 훨씬 더 중요하다는 점을 강조합니다.

그러나 다음 코드를 고려하십시오.

var c = $('<div class="container" />').appendTo($('body')) 
for(var i = 0; i < 1000; i++) { 
    c.append($('<div />') 
    .css('height', 30) 
    .css('width', 30) 
    .css('borderWidth', 2) 
    .css('borderStyle', 'solid') 
    .addClass('anim')) 
} 

이 div.container를 만들고 내부 div.anim 1000 복사본을 둔다. 이렇게 한 다음 $('.container').fadeOut() 대 $('.anim').fadeOut()의 실적을 비교하십시오. 포함 된 div에 애니메이션을 적용하면 많은 자식을 애니메이션으로 표현하는 것보다 훨씬 빠르게 진행됩니다. 가능하면 모든 하위 항목에 동일한 방식으로 애니메이션을 적용하려면 항상 래퍼를 애니메이션으로 만드십시오.