2010-09-18 1 views
6

J'ai un objet que je veux démarrer comme caché. J'ai essayé d'utiliser chacun de ces styles un à la fois. Je les ai dans une classe, pas comme des styles en ligne.JQuery: Démarre l'objet comme caché d'une manière qui permet à .fadeIn() de fonctionner

display:none; 

et

opacity:0;filter:alpha(opacity=0); 

Maintenant, ces deux travaillé évidemment, les objets cachés charger. Le problème est que lorsque je les utilise, la fonction JQuery .fadeIn() ne fonctionne pas. En fait, quand je mets l'opacité à .5 (50), le fondu ne se fond que dans .5 (50).

Alors, que puis-je par défaut l'objet à cela permettra à la fonction .fadeIn() de fonctionner?

Merci!

+2

Si vous utilisez uniquement'Affichage: none' la 'fadeIn()' devrait fonctionner. Voici un exemple: http://jsfiddle.net/n7FzR/1/ – user113716

+0

Etes-vous sûr que vous n'essayez pas de 'fadeIn' un enfant de l'élément auquel vous attachez ces styles? –

Répondre

8

Salut est un code avec la version de travail

HTML

<html> 
    <body> 
     <p>test</p> 
    </body> 
</html> 

jquery

$(document).ready(function() { 
$('p').fadeTo('slow', 1, function() { 
     // Animation complete. 
    }); 
}); 

CSS

p{ 
    display:none; 
    opacity:0.0; 
    filter:alpha(opacity=0); 
} 
​ 

démonstration en direct

http://jsfiddle.net/2p2v4/

+0

merci beaucoup monsieur – Nate

+0

Selon votre disposition, vous ne voudrez peut-être pas commencer par 'display: none;', et heureusement cela semble fonctionner sans cela. –

2

vous pouvez utiliser ci-dessous par écrit ou ajoutez simplement votre code en bas de page

.fadeInOnLoad 
{ 
    display:none; 
} 

     <div class="fadeInOnLoad">iam visible after page is loaded</div> 

     jQuery(function(){ 
      // your fade in code, call it after dom is ready 
      jQuery('.fadeInOnLoad').fadeIn(); 
     }); 

Je pense que votre problème est

  • vous appelez fondu avant la Les éléments dom sont créés dans le navigateur

  • ou en utilisant jQuery , Version studio visuel, comme je me souviens qu'il y avait un bug dans la chose d'opacité de jQuery en version visual studio