Fading multiple elements simultaneously - jquery

Question

I want to do the following:

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

these vars are divs created with jquery

but only the first element fades in, I really need all elements to fade in at the same time.

Answer 1

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

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

Answer 2

Assuming that newPanel and so on are variables created like that:

newPanel = $("#newPanel");

just write:

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

Answer 3

Either do it using a $.each call or I would recommend that you group them by a class or id and fade using that.

You could for example group all related elements in classes and then do a $.each call on those classes instead of every single element.

Answer 4

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

update:
And if you want to call the function only once, you could do something like @Guffa did by adding the 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);