CODEWITHSUNDEEP
jqueryfade
user429620
user429620

Reputation:

Fading multiple elements simultaneously - jquery

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.

Upvotes: 11

Views: 14119

Answers (4)

gion_13
gion_13

Reputation: 41533

$.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);

Upvotes: 1

inquam
inquam

Reputation: 12932

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.

Upvotes: 0

Guffa
Guffa

Reputation: 700182

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

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

Upvotes: 26

Fender
Fender

Reputation: 3055

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);

Upvotes: 1

Related Questions