jQuery add/remove Class with fadeIn/Out

Question

I would to apply a fadeIn effect to a addClass function..and fadeOut to removeClass...

Can you help me?

This is my code

$('#loader'+idTurno).addClass('loader');

...

$('#loader'+idTurno).removeClass('loader');

score 48 · Accepted Answer · edited Feb 15 '14 at 19:15

48

Fade In:

$("#loader").fadeIn("slow", function() {
    $(this).addClass("loader");
});

Fade Out:

$("#loader").fadeOut("slow", function() {
    $(this).removeClass("loader");
});

As another user said, you may want to look into using toggleClass.

edited Feb 15 '14 at 19:15

Ry-

218,210
55
464
476

answered Mar 31 '13 at 16:49

What have you tried

11,018
4
31
45

11

@minitech I tried the above solution but when the second function runs(fadeout) the element completely disappears.In my case the elements is dropdown menu(select).What I've noticed is that to the element that "disappears" from view a style of display:none is applied. Why that happens? – Dimitris Papageorgiou Oct 08 '14 at 13:54
3

@DimitrisPapageorgiou Read the documentation of `fadeOut()`. It talks about how after the opacity is set to 0, the display property is set to `display: none` - http://api.jquery.com/fadeout/ – What have you tried Oct 08 '14 at 15:02
@minitexh yes....you are right,what are my alternatives?Anyway,the fiddle is here http://jsfiddle.net/fiddlehunt/achgnmcv/ try chaning a value to the From menu – Dimitris Papageorgiou Oct 08 '14 at 15:15
@DimitrisPapageorgiou First, you're responding to the wrong person ;) Second, please open up another question or do some more in-depth searching. – What have you tried Oct 08 '14 at 15:50
1

Unfortunately I am banned from making new question.I 'll see what I am going to do.Anyway,thanks. – Dimitris Papageorgiou Oct 08 '14 at 15:59
16

not a solution! hides the item, not just removing class – Michael Tallino Jun 17 '15 at 20:53
You can use this option, but just add another div to overlay on top of #loader that contains the css styling you want. Fade that div in and out which will create the effect you want. – Matt Pierce Apr 14 '16 at 17:22
Comments say it all. Please note the answer below that is under water by -9 or so. That is the answer that solved my problem instantly. – horace Jan 03 '23 at 05:04

score 18 · Answer 2 · answered Feb 28 '14 at 14:35

18

Another way to achieve that, using your original jQuery code, the CSS way :

#loader {
  transition: opacity 500 ease-in-out;
}

Smoother animation, easier to maintain.

answered Feb 28 '14 at 14:35

enguerranws

8,087
8
49
97

Does nothing for me. – Viktor Joras Sep 29 '18 at 15:58
You have to use an additional class, like the asker posted: `.loader` which will set the opacity to 0 or 1. Then toggle this class with JS. – enguerranws Oct 02 '18 at 08:07

score 5 · Answer 3 · answered Sep 01 '17 at 05:40

5

#loader {
  transition: all 0.9s ease-out 0s;
}

answered Sep 01 '17 at 05:40

Hil

329
4
10

score 2 · Answer 4 · answered Aug 04 '20 at 18:07

2

Perhaps used setTimeout function after fadeIn class

 $('#loader').addClass('loader').fadeIn('slow');
 setTimeout(function(){  $('#loader').removeClass('loader'); }, 1000);

answered Aug 04 '20 at 18:07

Omair

41
1

This worked nicely for me. I tried adding .fadeOut to .removeClass but, as noted above, at the end of the fade it sets the selector to display none so I just have it fading in and the being removed. – John Contarino Jul 28 '21 at 15:21

score 0 · Answer 5 · answered Sep 16 '16 at 11:50

0

Make it simple :

$('#loader'+idTurno).addClass('loader').fadeIn(1000);
$('#loader'+idTurno).removeClass('loader').fadeIn(1000);

answered Sep 16 '16 at 11:50

Sulung Nugroho

1,605
19
14

3

This makes the entire DIV fadein or fadeout, not just the class. – Koby Douek Jan 16 '17 at 13:59

score -7 · Answer 6 · edited Feb 28 '14 at 14:06

-7

You should add a duration to the remove/addClass method:

$('#loader'+idTurno).addClass('loader',500);
$('#loader'+idTurno).removeClass('loader',500);

edited Feb 28 '14 at 14:06

icedtrees

6,134
5
25
35

answered Feb 28 '14 at 13:44

imfromthepast

49
3

4

This answer is blatantly wrong, as seen at https://api.jquery.com/addClass/ there is no `duration` property for the `$.addClass()` or `$.removeClass()` methods. – DavidScherer May 21 '14 at 21:12
5

If we are using only jquery, then your statement would be correct @DavidScherer. If however, the OP uses jqueryUI the above would be correct as jqueryUI (while quite hefty to add such a small feature) does indeed support fading a class in and out with a duration. http://api.jqueryui.com/addClass/ – Dennis Bartlett Nov 16 '14 at 06:07
+1 This is the best, simplest answer. It not only works perfectly, it even has an "easing" parameter for a linear or swing transition. Sad that the answer is below water. @DennisBartlett – horace Jan 03 '23 at 05:19

jQuery add/remove Class with fadeIn/Out

6 Answers6