2010-03-12 14 views
69

Mam kilka miniaturek, które ładuję w stylu visibility: hidden;, aby wszystkie zachowały poprawne układy. Gdy strona jest już w pełni załadowana, mam funkcję jquery, która zanika. Ta funkcja zadziałała, gdy ich styl został ustawiony na display: none;, ale oczywiście układ został skręcony. Jakieś sugestie?Element zanikający jquery nie wyświetla elementów w stylu "widoczność: ukryta".

Herezje linia blaknięcie:

$('.littleme').fadeIn('slow'); 

Odpowiedz

144

dodać kilka połączeń do sieci tak:

$('.littleme').css('visibility','visible').hide().fadeIn('slow'); 

Będzie to zmienić do display:none na 1 klatkę przed zniknięciem, zajmując ponownie obszar.

+0

Pozdrawiam działa dobrze. Brak zauważalnego opóźnienia lub przesunięcia w tej 1 klatce. – kalpaitch

+2

i odwrotnie: '$ (" .Littleme "). FadeOut (prędkość, funkcja() {$ (" .Littleme "). Css (" widoczność "," ukryty "). Css (" display "," ") ;}); ':-) – eruciform

+5

@eruciform - aby wyeliminować' display: none' na końcu, możesz po prostu zrobić '$ ('.littleme'). FadeTo (prędkość, 0);', które nie będzie ustaw 'display' na końcu, ten sam efekt z mniejszą pracą :) –

25

spróbuj krycie i animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000); 
+0

Zawsze jestem trochę zmęczony używaniem nieprzezroczystości w odniesieniu do css z powodu IE. Przypuszczalnie jquery obsługuje to bez żadnych problemów? – kalpaitch

+0

To nie zadziała, ponieważ nadal nie jest widoczne, sprawdź sam. –

+1

oczywiście, musisz usunąć widoczność: ukryty. I tak, jQuery obsługuje problem krycia w IE. – David

0

Spróbuj dopasować ukryty element?

$ (".Littleme: hidden"). FadeIn();

1

Czy zamiast tego używasz fadeTo (czas trwania, wartość)? Z pewnością w ten sposób można znikną na 0 i 1, w ten sposób nie wpływają na obieg dokumentów ...

8

<span style="opacity:0;">I'm Hidden</span>

do pokazania: $('span').fadeTo(1000,1)

To Hide  : $('span').fadeTo(1000,0)

przestrzeń jest zachowywana w układzie DOM

http://jsfiddle.net/VZwq6/

+1

Ponieważ krycie nie jest obsługiwane w IE <9 i chcę zacząć od niewidzialnego stanu, połączyłem to rozwiązanie z https://github.com/bladeSk/internet-explorer-opacity- polyfill –

Powiązane problemy