Exemples d'utilisation des méthodes slidedown et slideup dans jQuery

Voici une analyse et une synthèse de l'utilisation des méthodes slidedown et slideup dans jQuery, sous forme d'exemple. Partageons cela pour que chacun puisse le consulter, voici les détails :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown();1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp();1000);
      });
      //*****Exemple1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****Exemple2 Les fonctions d'animation peuvent transmettre des fonctions de rappel, c'est-à-dire que cette fonction sera exécutée après la fin de l'animation.
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('Je suis terminé !');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="Développer div" />
    <input id="btnslideUp" type="button" value="Récupérer div" />
    <input id="btnToggle" type="button" value="Basculer" />
  </div>
  <div id="message">
    Différence entre mouseover et mouseenter : div contenant div. Voir les notes. Lié à la propagation des événements.<br /> 
    L'événement mouseover est déclenché que le pointeur de la souris traverse l'élément sélectionné ou ses éléments enfants <br />
    L'événement mouseenter est déclenché uniquement lorsque le pointeur de la souris traverse l'élément sélectionné (le passage des éléments enfants ne déclenche pas l'événement)
  </div>
</body>
</html>

Pour plus d'informations sur jQuery, les lecteurs intéressés peuvent consulter les sujets spéciaux de ce site : 'Résumé des techniques de manipulation des fenêtres jQuery', 'Résumé des techniques et astuces de glisser-déposer jQuery', 'Résumé des plugins et utilisations courantes jQuery', 'Résumé des utilisations d'Ajax dans jQuery', 'Résumé des techniques de manipulation des tableaux (table) jQuery', 'Résumé des techniques d'extension jQuery', 'Résumé des effets classiques courants jQuery', 'Résumé des utilisations des animations et des effets jQuery' et 'Résumé des utilisations des sélecteurs jQuery'.

J'espère que ce tutoriel peut aider les développeurs jQuery.

Déclaration : Le contenu de cet article est tiré d'Internet, propriété intellectuelle de son auteur, le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément. Ce site ne détient pas de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation et fournir des preuves. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)

Tutoriel de base