如何简化jQuery动画？

如何简化jQuery动画？最好的方法是什么

代码：

---

为每个元素指定一个类（或附加类）：

或者将所有元素放在一个选择器中，用逗号分隔

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

---

既然看起来您正在为一组元素设置动画，您是否可以将所有元素都包装在一个div中，然后只为该div设置动画

---

根据您的需要，您可能还需要查看功能。它基本上会使背景变暗并高亮（或曝光）特定对象。如果这更像您正在尝试完成的任务，那么也有一个覆盖工具。

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'))
}

var c=$（''）.appendTo（$（'body'））
对于（变量i=0；i<1000；i++）{
c、 追加（$（''）
.css（'height'，30）
.css（'width'，30）
.css（'borderWidth'，2）
.css（'borderStyle'，'solid'）
.addClass（'anim'））
}

这将创建

div.container

，并在其中放置1000份

div.anim

。执行此操作，然后比较

$（'.container'）.fadeOut（）与
$（'.anim'）.fadeOut（）的性能。为包含的div设置动画比为其多个子对象设置动画快几个数量级。如果可能，如果要以相同的方式设置包装器所有子对象的动画，请始终设置包装器的动画

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

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'))
}