Как я могу упростить анимацию 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, а затем просто анимировать, что 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 и помещает 1000 экземпляров div.anim внутри него. Сделайте это, затем сравните производительность $('.container').fadeOut() по сравнению с $('.anim').fadeOut(). Анимация содержащего div на порядок быстрее, чем оживление его многочисленных детей. Если возможно, всегда анимация обертки, если вы хотите анимировать всех своих детей одинаковым образом.