Как я могу упростить мою анимацию 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

То, что предлагает Патрик Д.В., существенно очистит ваш код 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 на несколько порядков быстрее, чем анимация его множества потомков. Если возможно, всегда анимируйте оболочку, если вы хотите анимировать всех ее дочерних элементов одинаковым образом.

Answer 3

Так как кажется, что вы анимируете группу элементов, не могли бы вы обернуть их все в div, а затем просто оживить этот div?

В зависимости от ваших потребностей, вы также можете посмотреть Функциональные возможности jQuery Tools * .Он в основном затемняет фон и выделяет (или выставляет) конкретный объект.Также есть инструмент наложения, если это больше похоже на то, что вы пытаетесь выполнить.