Effets - La fonction fadeIn() de Jquery

Description

La fonction fadeIn du framework Jquery permet d'afficher un élément ou un ensemble d'éléments html invisibles pour l'utilisateur. Il donnera un effet de progression en modifiant l'opacité lors de l'affichage de cet élément.

La fonction fadeIn() possède deux paramètres :

  • vitesse : temps en milliseconde ou vitesse durant lequel l'effet va ĂŞtre visible pour l'affichage de l'Ă©lĂ©ment. Exemples : slow, fast, 3000, ...
  • callback : fonction ou code a exĂ©cuter lorsque l'animation sur l'Ă©lĂ©ment est terminĂ©e

Ces deux paramètres sont optionnels.

Publicité
Solution

// Mise en place de l'élément HTML invisible
<p id="p_hidden" style="display:none;">
   Voici un test
</p>

// Mise en place du script
<script type="text/javascript">
   $(document).ready(function(){

    /* Exemple 1 : Affichage simple */
    $("#p_hidden").fadeIn('slow');


    /* Exemple 2 : Affichage et appel d'une fonction */
    $("#p_hidden").fadeIn('fast',function(){
      alert('Il est maintenant affiché !');
    });

  });
</script>

Tester en cliquant ici !

Notez la solution
1.8/5 (226 votes)
Partagez cette question
Questions similaires
Effets - La fonction fadeOut() de Jquery
Mots clés fadeIn, jquery, opacité
Derniére modification le 16/11/10 à 10:29