Czy istnieje alternatywa dla funkcji fadeOut(), która nie używa ekranu: brak dla stylu? Chciałbym po prostu ukryć widoczność, aby uniknąć jakiegokolwiek przesunięcia w układzie strony?jQuery fadeOut bez wyświetlania brak?
Można użyć .animate() na opacity bezpośrednio:
$(".selector").animate({ opacity: 0 })
ten sposób elementem nadal zajmuje przestrzeń tak, jak chcesz, to po prostu ma 0 krycie, więc skutecznie tak samo jak bycie visibility: hidden gdy jest kończy się.
animacja niestandardowa jest alternatywą
.animate({opacity: 0.0}, 5000, 'linear', callback);
Tak, nie ma alternatywy. It's called .fadeTo(), gdzie ustawiasz docelową siłę krycia, która w Twoim przypadku będzie wynosiła 0.
$('element').fadeTo(1000, 0); // fade to "0" with a 1000ms duration
Nie zmieni to właściwości display na końcu.
To nie dodaje ekranu: brak przy zaniku do 0, ale jeśli znikniesz do wartości powyżej 0, wymusza wyświetlanie: blok (przynajmniej gdy masz wyświetlacz: brak).W rzeczywistości zmienia to właściwość wyświetlania w pewnych okolicznościach. Musiałem użyć programu animate(), aby tego uniknąć. – Jens
Ale co jeśli chcę ukryć element, aby nie zajmował miejsca w dokumencie (np. Brak wyświetlania). A wszystko to bez ustawiania wyświetlacza na żaden. –
To działało świetnie, po prostu musiałem dodać zarówno blaknięcie, aby pokazać i blaknięcie, aby ukryć. $ ('# msgInfo'). fadeTo (0, 500); $ ('# msgInfo'). FadeTo (2000, 0); –
Jednym ze sposobów osiągnięcia tego celu jest przechwytywanie tryb wyświetlania, a następnie .fadeOut, a pełna, czy preferowany sposób ukrycia, i ustawić wyświetlanie z powrotem do tego, co było:
var $element = $('#selector');
var display = $element.css('display');
$element.fadeOut(500, function() {
$element.css('visibility', 'hidden');
$element.css('display', display);
}
nocie że
fadeTo(500, 0) // fade out over half a second
fadeTo(0, 0) // instantly hide
jest (dziwnie) nie jest kompatybilny z
fadeIn()
(gdy chcesz pokazać go ponownie). Więc jeśli używasz
fadeTo(500, 0)
w celu ukrycia czegoś bez css display: none następnie należy użyć
fadeTo(500, 1)
zanikać ją z powrotem albo będzie jeszcze opacity: 0 pozostały w css i pozostanie niewidoczny.
I chcesz fadeOut, a następnie zmienić zawartość, a następnie fadeIn ponownie:
$("#layer").animate({opacity: 0}, 1000, 'linear', function(){
//Do here any changes to the content (text, colors, etc.)
$("#layer").css('background-color','red'); //For example
$("#layer").animate({opacity: 1}); //FadeIn again
});
Dziękuję! to naprawdę pomóż mi +1 –
Użytkownik może nadal kliknąć na elemencie (* np * link), choć w takim przypadku może chcieć ustawić 'widoczność: ukryta;' w funkcji wywołania zwrotnego zakończenia lub coś podobnego. – PleaseStand
Chcę ukryć element bez ustawiania wyświetlania na none. Additinaly Nie chcę, żeby element utrzymywał przestrzeń, wygląda okropnie, jeśli nie ma nic na stronie, ale przestrzeń jest nadal zarezerwowana ... –
@ObaidMaroof to właśnie ekran zachowania: żaden nie jest dla ... Jeśli mówisz o natychmiastowej chowanej skórze, której nie chcesz, a następnie szukasz .fadeOut(), która wyświetla: none * after * a fade. –