web-dev-qa-db-fra.com

L'élément jquery fade n'affiche pas les éléments de style 'visibilité: caché'

J'ai un tas de vignettes que je charge avec un style de visibility: hidden; afin qu'ils conservent tous leurs dispositions correctes. Une fois la page entièrement chargée, j'ai une fonction jquery qui les fait fondre. Cela a fonctionné lorsque leur style a été défini sur display: none; mais de toute évidence la mise en page s'est vissée. Aucune suggestion?

Voici la ligne de fondu:

$('.littleme').fadeIn('slow');
jqueryvisibilityfadein
71
kalpaitch

Ajoutez quelques appels à la chaîne comme ceci:

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

Cela le changera en display:none pendant 1 image avant de fondre, occupant à nouveau la zone.

151
Nick Craver

essayez d'utiliser l'opacité et animate():

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

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

Pour afficher: $('span').fadeTo(1000,1)

Pour masquer: $('span').fadeTo(1000,0)

L'espace est conservé dans la disposition DOM

http://jsfiddle.net/VZwq6/

10
user

Vous ne pouvez pas utiliser fadeTo (durée, valeur) à la place? De cette façon, vous pouvez sûrement passer à 0 et 1, de cette façon, vous n'affectez pas le flux de documents ...

1
Neil

Essayez de faire correspondre l'élément caché?

$ (". littleme: hidden"). fadeIn ();

0
iivel