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.

What's your problem? Do you get an error? Do only a number of animations work? Does nothing happen at all? — Martin Tournoij
– Martin Tournoij, Commented Dec 10, 2014 at 14:22
You're missing a ) at the very end, in both examples. Any errors showing up in the JS console? — Paul Roub
– Paul Roub, Commented Dec 10, 2014 at 14:22
As a side note, you've got #container_inner02 in there twice on your new line — Mathew Thompson
– Mathew Thompson, Commented Dec 10, 2014 at 14:25

urbz · Accepted Answer · 2014-12-10 14:26:12Z

2

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

answered Dec 10, 2014 at 14:26

urbz

2,6671 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tzafar · Accepted Answer · 2014-12-10 14:26:23Z

0

Try this

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

answered Dec 10, 2014 at 14:26

tzafar

6643 silver badges12 bronze badges

Comments

Spencer Wieczorek · Accepted Answer · 2014-12-10 14:32:19Z

0

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

edited Dec 10, 2014 at 14:32

answered Dec 10, 2014 at 14:26

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

4 Comments

Paul Roub Over a year ago

Including #container_inner01 in the fadeOut() instead of fading it in isn't exactly the same as the original two steps.

AGE Over a year ago

Your second code ommits the fact that the OP is using fadeIn for #container_inner01 and fadeOut for the remaining containers

Spencer Wieczorek Over a year ago

@PaulRoub Oh your right, didn't notice it was different. I'll edit my answer.

Spencer Wieczorek Over a year ago

@AGE Thanks for pointing that out, I didn't notice the fadeIn() and thought they were all fadeOut().

Collectives™ on Stack Overflow

Simplifying javascript

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related