How to fadeOut two children elements simultaneously using $(this)

Question

I have a div in which there are 3 buttons. What I am expecting is that when I click the 3rd button, the 2nd and the 3rd buttons should fadeOut ... but in reality, only the 3rd button is fading out ... why so?

Here's, my code

<div id="bttns">
<button class="btn btn-danger"> Delete </button>     //1st Button
<button class="btn btn-warning"> Modify </button>    //2nd Button
<button class="btn btn-success"> Complete </button>  //3rd Button
</div>

And here is the jQuery

$(".btn-success").on("click", function(){
 $( $(this) , $(this).parent().children(".btn-warning") ).fadeOut(500)
})

I couldn't find a question similar to mine ... and also I am new to all of this so if you do find that such a question exists, please redirect me to it.

Does this answer your question? [Fading multiple elements simultaneously - jquery](https://stackoverflow.com/questions/6952556/fading-multiple-elements-simultaneously-jquery) — matthias_h, May 06 '20 at 16:31
@matthias_h No, it doesn't ... bcuz I have multiple buttons on the same page containing the same class, and if I don't all of them to fade together ... so I want to use $(this) and then fade them out, not just fadeOut multiple elements — Ashutosh Pardeshi, May 15 '20 at 16:46

score 0 · Answer 1 · answered May 06 '20 at 16:29

This happens becuse:

 $( $(this) , $(this).parent().children(".btn-warning") )

this is not a valid selector here. To chain multiple jQuery objects you can use .add() method and then call .fadeOut(500) on the collection like:

$(".btn-success").on("click", function() {
  var $btn3 = $(this);
  var $btn2 = $(this).parent().children(".btn-warning");
  $btn2.add($btn3).fadeOut(500)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bttns">
  <button class="btn btn-danger"> Delete </button>
  <button class="btn btn-warning"> Modify </button>
  <button class="btn btn-success"> Complete </button>
</div>

score 0 · Answer 2 · answered May 06 '20 at 16:31

0

As you have assigned classes. You can go like this :-

$(".btn-success").on("click", function () {
     $('.btn-warning, .btn-success').fadeOut(500);
})

answered May 06 '20 at 16:31

Varun Sharma

206
1
9

I did not downvote this one, but if there are more elements in the page using the classes specified, they will also fade out. – Taher May 06 '20 at 16:38

Taher · Accepted Answer · 2020-05-06T16:31:40.003

-1

you are fading out only the button with the btn-warning class. instead use two selectors.

$(".btn-success").on("click", function(){
 $(this).parent().children(".btn-warning, .btn-success").fadeOut(500)
})

edited May 06 '20 at 16:31

answered May 06 '20 at 16:29

Taher

11,902
2
28
44

sorry it was a typo, fixed. – Taher May 06 '20 at 16:32

How to fadeOut two children elements simultaneously using $(this)

3 Answers3