Question

How can I simplify my jQuery animation? What is the best way?

Code:

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

Either give each of the elements a class (or an additional class):

$('.someNewClass').animate({opacity:0.2},1000);

Or place all your elements in one selector, separated by commas.

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

Or a combination of the two, adding a class just the ones that don’t currently have a class.

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