vorrei per applicare un effetto a un fadeIn addClass function..and fadeOut a removeClass ...jQuery aggiungere/rimuovere Class con fadeIn/Out
mi potete aiutare?
Questo è il mio codice
$('#loader'+idTurno).addClass('loader');
...
$('#loader'+idTurno).removeClass('loader');
Fade In:
$("#loader").fadeIn("slow", function() {
$(this).addClass("loader");
});
Fade Out:
$("#loader").fadeOut("slow", function() {
$(this).removeClass("loader");
});
Come un altro utente ha detto, potresti voler usare toggleClass.
si dovrebbe aggiungere una durata al metodo/addClass remove:
$('#loader'+idTurno).addClass('loader',500);
$('#loader'+idTurno).removeClass('loader',500);
Questa risposta è palesemente errata, come visto su https://api.jquery.com/addClass/ non esiste una proprietà 'duration' per i metodi' $ .addClass() 'o' $ .removeClass() '. – DavidScherer
Se usiamo solo jquery, la tua affermazione sarebbe corretta @DavidScherer. Se, tuttavia, l'OP utilizza jqueryUI, quanto sopra sarebbe corretto poiché jqueryUI (mentre è piuttosto pesante aggiungere una funzione così piccola) supporta effettivamente la dissolvenza di una classe dentro e fuori con una durata. http://api.jqueryui.com/addClass/ –
Un altro modo per raggiungere questo obiettivo, utilizzando il codice originale jQuery, il modo in cui i CSS:
#loader {
transition: opacity 500 ease-in-out;
}
un'animazione più fluida, più facile mantenere.
Rendere semplice:
$('#loader'+idTurno).addClass('loader').fadeIn(1000);
$('#loader'+idTurno).removeClass('loader').fadeIn(1000);
Ciò rende l'intero DIV fadeout o fadeout, non solo la classe. –
#loader {
transition: all 0.9s ease-out 0s;
}
@minitech ho provato la soluzione di cui sopra, ma quando il secondo run di funzione (dissolvenza) L'elemento completamente disappears.In mio caso gli elementi sono menu a discesa (Select). Quello che ho notato è che all'elemento che "scompare" dalla vista uno stile di visualizzazione: nessuno è applicato. Perché succede? –
@DimitrisPapageorgiou Leggi la documentazione di 'fadeOut()'. Si parla di come dopo che l'opacità è impostata su 0, la proprietà display è impostata su 'display: none' - http://api.jquery.com/fadeout/ –
@minitexh si .... hai ragione, quali sono le mie alternative? In ogni caso, il violino è qui http://jsfiddle.net/fiddlehunt/achgnmcv/ prova a modificare un valore nel menu Da –