Javascript Girl
  1. Javascript Girl
  3. JQuery .fadeIn () en charge de la page?
Intereting Posts
Pourquoi NaN === NaN est-il faux? JQuery plugin DataTables: Comment mettre en évidence le texte de recherche actuel? Remplacez une image existante par une autre Comment changer les valeurs de l'axe Y des nombres réels en nombre entier dans les diagrammes? Affichage du menu réactif et masquer sur le clic Angular.js $ http.get comment forcer le codage UTF-8 Comment supprimer le compilateur Less avec une fonction personnalisée utilisant un plugin Comment utiliser ng-animate en 1.2 angulaire? Téléchargement de PDF en tant que Blob avec JS dans IE9 Créer WebElement visible via Selenium avec Python avec JavaScript InnerWidth et outerWidth oddness sur le bureau Pourquoi Firefox 3 se brise avec console.log Devrais-je utiliser une variable globale et sinon, à la place? (Javascript) Vérifiez si les cookies sont activés Valeur par défaut d'un type en javascript

JQuery .fadeIn () en charge de la page?

J'essaie de configurer un code pour que j'aie un qui soit caché au début mais qui s'efface après que la page est chargée.

J'ai le code HTML suivant: 

<div class="hidden"> <p>This is some text.</p> </div>

Ensuite, j'ai aussi ce code CSS, qui cache le <div> . 

 div.hidden { display: none }

Enfin, j'ai mon jQuery: 

 $(document).ready(function() { $('div').fadeOut(1); $('div').removeClass('hidden'); $('div').fadeIn(1000); });

Ce que j'espérais arriver serait que le premier .fadeOut () disparaitrait, la RemoveClass empêcherait le CSS de le cacher, et le final .fadeIn () le refaçait sur la page. Malheureusement, cela n'a pas marché.

Vous pouvez voir le code ici: Fiddle

Alors, quelqu'un peut-il me dire comment garder un <div> caché jusqu'à ce qu'une page soit chargée, puis la faire disparaître en utilisant jQuery?

Merci!

Le problème est que fadeIn fonctionne sur des éléments cachés, lorsque vous supprimez la classe cachée avant que l' fadeIn() soit appelé l'élément est complètement affiché, donc il n'y a rien à fadeIn()

CA devrait etre 

 $(document).ready(function () { $('div.hidden').fadeIn(1000).removeClass('hidden'); });

Demo: Fiddle

Code HTML: 

 <div class="toshow" style="display:none;"> This is some text. </div>

Jquery Code: 

 $(document).ready(function () { $('div.toshow').fadeIn(2200); // OR $('div.toshow').show(2200); // OR $('div.toshow').slideDown("slow"); });

Changez l'animation jquery show () / hide ()?

http://jsfiddle.net/DerekL/Bm62Y/5/ 

 //If you do not want the "hidden" class to be still around $(function() { $('div').fadeIn(1000).removeClass('hidden'); }); //If you don't mind it, then you can just do fadeIn $(function() { $('div').fadeIn(1000); }); 
 //image fade in //set image display none $("img").css("display", "none"); //call the image with fadeIn effect $("img").fadeIn(5000 , function(){ $(this).css("display","normal"); });

J'ai expérimenté des images. Vous pouvez essayer aussi le texte …