10

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267

4 Answers4

26

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

newPanel.add(prevBtn).add(nextBtn).add(infoPanel).fadeIn(200);
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Ahhh, that's quite nice. Will try that next time. – inquam Aug 05 '11 at 07:05
  • 1
    @Guffa I added a callback and the callback is executed four times. Is this normal with any grouping? –  Aug 05 '11 at 07:21
  • 1
    @Wesley: As you have four elements in the jQuery object, each animation gets its own callback. From the docs: "If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole." http://api.jquery.com/fadeIn/ – Guffa Aug 05 '11 at 07:29
  • @Guffa Suppose to have an array of jQuery objects, can you add them in a for cycle to `newPanel`? Thanks in advance. – JeanValjean Aug 08 '12 at 08:49
  • @jonny_cage: Yes, you can use the add method to concatenate jQuery objects. If you can make it an array of elements instead of jQuery objects, you can use a single add call. – Guffa Aug 08 '12 at 13:46
  • @Guffa. Thanks for the answer. Could you make a brief example? – JeanValjean Aug 08 '12 at 14:26
  • 1
    @jonny_cage: Where `j` is the jQuery object and `arr` is the array of jQuery objects to add to it: `for (var i = 0; i < arr.length; i++) j = j.add(arr[i]);` – Guffa Aug 08 '12 at 14:36
  • Ah ok! I understood that you can add the whole array to add. Now it is clear. Thanks. – JeanValjean Aug 08 '12 at 14:39
  • Does this work with IE? I am using this line of code and IE fade out animation doesn't start: `$('#yellow').add($("#sine")).animate({opacity: '0'}, function() { .. } ...` – krizajb Nov 07 '12 at 16:59
  • Seems IE has problems with fadeOut animation .. ty for quick answer .. googling already :) – krizajb Nov 07 '12 at 17:13
1

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);
Fender
  • 3,055
  • 1
  • 17
  • 25
0
$.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);
Community
  • 1
  • 1
gion_13
  • 41,171
  • 10
  • 96
  • 108
0

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.

inquam
  • 12,664
  • 15
  • 61
  • 101
  • If I add a callback, will that be executed for each element that has the class? I just want a callback called once. @inquam –  Aug 05 '11 at 07:21
  • 1
    You mean if you have a callback to be called when the animation has finished will it trigger once for the entire collection of elements using the class or once for every element using the class? I actually don't know by heart. I would guess that it would trigger once for every element though since I think it get's attached onto each element. This could be overcome by adding a check if the callback has already been called once. Something like `if(!firsttime) return;`. Perhaps not the prettiest thing in the world but it would work. – inquam Aug 05 '11 at 07:37