如何简化我的 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 工具的 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 进行动画处理比对其许多子项进行动画处理要快几个数量级。如果可能的话，如果您想以相同的方式为包装器的所有子级设置动画，请始终为包装器设置动画。