Simplifying javascript

Question

I have multiple fadeouts happening at the same time on various Ids, Is there any way of setting this up in one line as example:

This:

$("#bottle").on('click', function() {
 $("#container_inner01").fadeIn(1100);
 $("#container_inner02").fadeOut(1100);
 $("#container_inner03").fadeOut(1100);
 $("#container_inner04").fadeOut(1100);
 $("#container02").fadeOut(1100);
})

turned it to this:

$("#bottle").on('click', function() {
 $("#container_inner01").fadeIn(1100);
 $("#container_inner02,#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
})

I am sure its possible and its some syntax error I am doing.

• j08691: What you have should work.
• Martin Tournoij: What's your problem? Do you get an error? Do only a number of animations work? Does nothing happen at all?
• Paul Roub: You're missing a ) at the very end, in both examples. Any errors showing up in the JS console?
• Mathew Thompson: As a side note, you've got #container_inner02 in there twice on your new line
• j08691: @PaulRoub - no he's not.

Answer 1

Why not give your elements a class and execute the script that way?

$("#bottle").on('click', function () {
 $("#container_inner01").fadeIn(1100);
 $('.test').fadeOut(1100);
});

JsFiddle demo

Answer 2

Try this

(function($){
 $("#bottle").on('click', function() {
 $('#container_inner01').fadeIn(1100);
 $('#container_inner02,#container_inner03,#container_inner04,#container02').fadeOut(1100);
 });
})(jQuery);

Answer 3

Doing what you have in the second script:

$("#bottle").on('click', function() {
 $("#container_inner01").fadeIn(1100);
 $("#container_inner02,#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
});

Will work, although you can sum this up to this:

$("#bottle").on('click', function() { 
 $("#container_inner01").fadeIn(1100);
 $("#container_inner02,#container_inner03,#container_inner04,#container02").fadeOut(1100);
});

Note that you have #container_inner02,#container_inner02 in you script repeating. Another way to do this is to add a class to all of them and using that class affects each item:

$("#bottle").on('click', function() { 
 $("#container_inner01").fadeIn(1100);
 $(".myClassName").fadeOut(1100);
});

• Paul Roub: Including #container_inner01 in the fadeOut() instead of fading it in isn't exactly the same as the original two steps.
• AGE: Your second code ommits the fact that the OP is using fadeIn for #container_inner01 and fadeOut for the remaining containers
• Spencer Wieczorek: @PaulRoub Oh your right, didn't notice it was different. I'll edit my answer.
• Spencer Wieczorek: @AGE Thanks for pointing that out, I didn't notice the fadeIn() and thought they were all fadeOut().