0

如何简化我的 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);
4

3 回答 3

2

要么给每个元素一个类（或一个附加类）：

$('.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);
于 2010-08-13T14:50:21.767 回答
0

既然您似乎正在为一组元素设置动画，您是否可以将所有这些元素包装在一个 div 中，然后只为该 div 设置动画？

根据您的需要，您可能还想查看jQuery Tools 的 Expose功能。它基本上使背景变暗并突出显示（或暴露）特定对象。如果这更像你想要完成的事情，那么它也有一个覆盖工具。

于 2010-08-13T15:09:40.363 回答
0

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

于 2010-08-13T15:17:48.470 回答