Top-News.fr

Top-News > Informatique > FadeIn() et FadeOut() de JQuery - exemples

FadeIn() et FadeOut() de JQuery - exemples

grey

FadeIn() et FadeOut() de JQuery

Exemples  de scripts utilisant les deux fonctions de la librairie JavaScript .

Tout d' abord pour utiliser des deux fonctions il faut télécharger et inclure JQuery à notre page HTML .
Pour télécharger JQuery c' est ici .
Voici comment insérer JQuery à notre page :

<html>
<head>
<script type=“text/javascript” src=“jquery-1.3.1.min.js”></script>
</head>
<body>
</body>
</html>

Détails des fonctions :

- la fonction fadeIn() permet de faire " apparaître " un élément invisible de la page HTML .
- la fonction fadeOut() permet de faire " disparaître " un élément visible de la page HTML .

On peut passer à ces deux fonctions un paramètre qui sera la vitesse de l' animation ( apparition ou disparition en " fondu enchaîné " ).
On peut passer les arguments :
- slow
- def
- fast
- une valeur numérique qui sera en millisecondes ( ex fadeIn(4000) => fadeIn sur 4000 ms = 4 secondes )

Exemple de page utilisant les fonctions fadeIn() et fadeOut() :
- le bouton intelligent teste si l' élément d' id " contenu " est visible ou non , il execute ensuite fadeIn() ou fadeOut() en fonction du test .

Voir l' exemple .

Télécharger les sources .

<html>
<head>
    <title>JQuery - FadeIn() et FadeOut() - Exemple</title>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#boutonFadeOut").click(function () {
              $("#contenu").fadeOut();
            });
            $("#boutonFadeIn").click(function () {
              $("#contenu").fadeIn();
            });
            $("#boutonIntelligent").click(function () {
              if ($("#contenu").is(":hidden")) {
                  $("#contenu").fadeIn();
              }else {
                  $("#contenu").fadeOut();
              }
            });
        });
    </script>
    <style>
        body{
            font-size: 14px;
        }
        input{
            width: 125px;
            background: #000;
            color: #FFF;
            border: 1px solid #000;
            cursor: pointer;
            font-size: 13px;
        }
        .mesBouttons{
            width: 440px;
            border: 1px solid #000;
            padding: 5px;
            margin: 10px;
        }
        .contenu{
            width: 450px;
            height: 100px;
            border: 1px solid #000;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
<body>

    <h1>JQuery - FadeIn() et FadeOut() </h1>

    Utilisation des fonctions de la librairie javascript.

    <div class="mesBouttons">
        <input type="button" id="boutonFadeOut" value="Tester Fade Out" />
        <input type="button" id="boutonFadeIn" value="Tester Fade In" />
        <input type="button" id="boutonIntelligent" value="Bouton Intelligent" />
    </div>

    <div id="contenu" class="contenu">
        Le contenu de mon div
    </div>

    Le restant de ma page

    <hr />

    <a href="" title="Télécharger les sources">Télécharger les sources</a>
</body>
</html>

Voir l' exemple .

Télécharger les sources .

plus de news sur FadeIn() et FadeOut() de JQuery - exemples

dans les dossiers : • Informatique

Votre avis sur le billet : FadeIn() et FadeOut() de JQuery - exemples