chciałbym aby zastosować efekt fadeIn do addClass function..and fadeOut do removeClass ...jQuery dodać/usunąć klasy z fadeIn/Out
Czy możesz mi pomóc?
To jest mój kod
$('#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");
});
Jak powiedział inny użytkownik, możesz zajrzeć do niego używając toggleClass.
należy dodać czas trwania do Remove metody/addClass:
$('#loader'+idTurno).addClass('loader',500);
$('#loader'+idTurno).removeClass('loader',500);
Ta odpowiedź jest ewidentnie błędna, jak widać na https://api.jquery.com/addClass/ nie ma właściwości "duration" dla metod '$ .addClass()' lub '$ .removeClass()'. – DavidScherer
Jeśli używamy tylko jquery, twoje oświadczenie będzie poprawne @DavidScherer. Jeśli jednak OP użyje jqueryUI, powyższe byłoby poprawne jak jqueryUI (chociaż dość mocne, aby dodać taką małą cechę) faktycznie wspiera zanikającą klasę do wewnątrz i na zewnątrz z czasem trwania. http://api.jqueryui.com/addClass/ –
Innym sposobem, aby to osiągnąć, używając oryginalnego kodu jQuery, sposób CSS:
#loader {
transition: opacity 500 ease-in-out;
}
Smoother animacji, łatwiej utrzymać.
ułatwiają:
$('#loader'+idTurno).addClass('loader').fadeIn(1000);
$('#loader'+idTurno).removeClass('loader').fadeIn(1000);
Powoduje to, że cały DIV zanika lub zanika, a nie tylko klasa. –
#loader {
transition: all 0.9s ease-out 0s;
}
@minitech Starałem się wyżej rozwiązanie, ale gdy drugi biegnie funkcyjne (Fadeout) element całkowicie disappears.In moim przypadku elementów jest rozwijane menu (wybór). Zauważyłem, że element, który "znika" z widoku stylu wyświetlania: żaden nie jest stosowany. Dlaczego tak się dzieje? –
@DimitrisPapageorgiou Przeczytaj dokumentację 'fadeOut()'. Mówi o tym, jak po ustawieniu krycia na 0, właściwość wyświetlania jest ustawiona na 'display: none' - http://api.jquery.com/fadeout/ –
@minitexh tak .... masz rację, co to jest W każdym razie, skrzypce są tutaj http://jsfiddle.net/fiddlehunt/achgnmcv/ spróbuj zmienić wartość z menu From –