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

Stemma

Answer 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.

Derogative

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

@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 – Derogative

@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 – Sideboard

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

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

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

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. – Chuu

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. – Admixture

Answer 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.

Schoenfelder

Does nothing for me. – Semidiurnal

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. – Schoenfelder

Answer 3

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

Kareem

Answer 4

Perhaps used setTimeout function after fadeIn class

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

Wicket

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. – Volcanism

Answer 5

Make it simple :

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

Outride

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

Answer 6

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

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

Aletaaletha

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

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 – Intramundane

+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 – Admixture

9 years is not too long for retribution I suppose... @Admixture – Aletaaletha