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

Solution 1

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.

Solution 2

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.

Solution 3

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

Solution 4

Perhaps used setTimeout function after fadeIn class

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

View more solutions

Comments

[DavidScherer]

This answer is blatantly wrong, as seen at api.jquery.com/addClass there is no duration property for the $.addClass() or $.removeClass() methods.

[Dimitris Papageorgiou]

@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?

[What have you tried]

@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 - api.jquery.com/fadeout

[Dimitris Papageorgiou]

@minitexh yes....you are right,what are my alternatives?Anyway,the fiddle is here jsfiddle.net/fiddlehunt/achgnmcv try chaning a value to the From menu

[What have you tried]

@DimitrisPapageorgiou First, you're responding to the wrong person ;) Second, please open up another question or do some more in-depth searching.

[Dimitris Papageorgiou]

Unfortunately I am banned from making new question.I 'll see what I am going to do.Anyway,thanks.

[Dennis Bartlett]

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. api.jqueryui.com/addClass

[Michael Tallino]

not a solution! hides the item, not just removing class

[Matt Pierce]

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.

[Koby Douek]

This makes the entire DIV fadein or fadeout, not just the class.

[Viktor Joras]

Does nothing for me.

[enguerranws]

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.

[John Contarino]

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.