Fading multiple elements at once - jquery

Question

I want to do the following:

$(newPanel, prevBtn, nextBtn, infoPanel).fadeIn(200, function() { } 

these vars are divs created using jquery

but only the first element fades, I really need all the elements to disappear gradually. Any idea?

Answer 1

You can use the add method to get elements in the same jQuery object:

 newPanel.add(prevBtn).add(nextBtn).add(infoPanel).fadeIn(200); 

Answer 2

Assuming newPanel etc. are variables such as:

 newPanel = $("#newPanel"); 

just write:

 newPanel.fadeIn(200); prevBtn.fadeIn(200); nextBtn.fadeIn(200); infoPanel.fadeIn(200); 

Answer 3

 $.each([newPanel, prevBtn, nextBtn, infoPanel], function(i, el) { $(el).fadeIn(200); }); 

update:
And if you want to call the function only once, you can do something like @Guffa by adding elements to the same jQuery collection and only then apply the animation (once):

 [newPanel, prevBtn, nextBtn, infoPanel] .reduce(function(el, next) { return el.add(next); }) .fadeIn(200); 

Answer 4

Either do this with a call to $.each , or I would recommend that you group them by class or ID and disappear with that.

You can, for example, group all related elements in classes, and then call $.each for these classes instead of each individual element.