JQuery - Animate() function still performs an animation on the .not(…), .not('…'), :not(…) and the :not('…') elements

Question

I'd like to state this should be a really simple thing, I really thought there was something about this problem in the forum, however, didn't find anything.

So, from the title, you can already say what's wrong. My code shouldn't hide #player-one-turn element. I know, it's in the parent called #fourth-step (but every element has it's parent body ), however, I wouldn't like to change the DOM here. Maybe it's necessary, I don't know.

---

 $("#fourth-step").not($('#player-one-turn')).animate({ opacity: 0 }); // SAME AS ABOVE - DOESN'T WORK //$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 }); //$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 }); //$("#fourth-step:not(#player-one-turn)").animate({ opacity: 0 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fourth-step"> <div id="player-one-turn"> DONT HIDE ME PLS </div> asd asd as das das das d asd as </div> 

JsFiddle in case of better editing: https://jsfiddle.net/ax07dnrf/1/ .

---

These cases didn't work:

$("#fourth-step").not($('#player-one-turn')).animate({ opacity: 0 });
$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
$("#fourth-step:not(#player-one-turn)").animate({ opacity: 0 });

Syntax error? I don't think so :D

---

Threads similar to my problem, however, both using :not() or .not() didn't work in my example:

1. Select all body except one element
2. jquery - run function on each element except the one that was clicked

Answer 1

Your selector says to find the one element that has an id of fourth-step and from that found element, exclude the element with an id of #player-one-turn . But, #player-one-turn will not be part of what's found by the first selector, so it can't be excluded.

You need to look at all the child elements within fourth-step and exclude #player-one-turn from those results.

The plain text asd asd as das das das d asd as is not considered a child element within the parent and so it is excluded. But, if you wrap it in an element (like span ), it will be included.

 // You don't have to pass a jQuery object to .not(), just a selector $("#fourth-step").children().not('#player-one-turn').animate({ opacity: 0 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fourth-step"> <div id="player-one-turn">DONT HIDE ME PLS</div> <div>HIDE ME PLS</div> <div>HIDE ME PLS</div> asd asd as das das das d asd as </div> 

Answer 2

 $("#fourth-step").contents().not($("#player-one-turn")[0]).wrap("<div></div>").parent().animate({ opacity: 0 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fourth-step"> <div id="player-one-turn"> DONT HIDE ME PLS </div> asd asd as das das das d asd as </div> 

Answer 3

You can even use find() and implement it. To understand .not()

 $("#fourth-step").find('*').not('#player-one-turn').animate({ opacity: 0 }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fourth-step"> <div id="player-one-turn"> DONT HIDE ME PLS </div> <span>asd asd as das das das d asd as</span> </div>