jQuery fade-element toont geen elementen met de stijl ‘visibility: hidden’

Ik heb een aantal miniaturen die ik laad met een stijl van visibility: hidden;zodat ze allemaal hun juiste lay-out behouden. Zodra de pagina volledig is geladen, heb ik een jQuery-functie die ze infadt. Dit werkte toen hun stijl was ingesteld op display: none;maar de lay-out was toen duidelijk verknoeid. Suggesties?

Hier is de fade-lijn:

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

Antwoord 1, autoriteit 100%

Voeg een paar aanroepen als volgt toe aan de keten:

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

Dit verandert het in display:nonevoor 1 frame voordat het infade en het gebied weer bezet.


Antwoord 2, autoriteit 17%

probeer dekking en animate()te gebruiken:

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

Antwoord 3, autoriteit 7%

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

To tonen: $('span').fadeTo(1000,1)

Te verbergen  : $('span').fadeTo(1000,0)

De ruimte blijft behouden in de DOM-lay-out

http://jsfiddle.net/VZwq6/


Antwoord 4

Kun je in plaats daarvan fadeTo(duration, value) gebruiken? Op deze manier kun je zeker vervagen naar 0 en 1, op die manier heb je geen invloed op de documentstroom…


Antwoord 5

Probeer het verborgen element te matchen?

$(“.littleme:hidden”).fadeIn();

Other episodes