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的动画比为其许多孩子设置动画要快几个数量级。如果可能，如果要以相同的方式为其所有子项设置动画，请始终为包装器设置动画。

如何简化我的jQuery动画？

3 个答案: