Beispiel zur Verwendung der Methoden slidedown und slideup in jQuery

Hier wird eine Zusammenfassung und Analyse der Verwendung der Methoden slideDown und slideUp in jQuery anhand von Beispielen gegeben. Hierzu werde ich Ihnen zur Verfügung stellen, wie folgt:

!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);
      });
      //*****Beispiel1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle();1000);
      //      });
      //*****Beispiel2 Animationsfunktionen können Callback-Funktionen übergeben, d.h. die Funktion wird ausgeführt, wenn die Animation abgeschlossen ist.
      $("#btnToggle").click(function () {
        $("#message").slideToggle();1000, function () {
          alert('Ich habe abgeschlossen!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="Div ausklappen" />
    <input id="btnslideUp" type="button" value="Div einklappen" />
    <input id="btnToggle" type="button" value="Umschalten" />
  </div>
  <div id="message">
    Unterschied zwischen mouseover und mouseenter: div in div. Siehe Anmerkung. Hat mit der Ereignisblase zu tun.<br> /> 
    Das mouseover-Ereignis wird ausgelöst, egal ob der Mauszeiger durch das ausgewählte Element oder seine Unterlemente hindurchgeht <br> />
    Der mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger durch den ausgewählten Elementen hindurchgeht (durch die Unterlemente nicht).
  </div>
</body>
</html>

Interessierte Leser, die mehr über jQuery erfahren möchten, können die Themen dieser Website überprüfen: "jQuery-Fenster-Bediener-Techniken zusammengefasst", "jQuery-Ziehen-und-Werfen-Effekte und -Techniken zusammengefasst", "jQuery-Standard-Plugins und -Verwendungen zusammengefasst", "jQuery-Ajax-Verwendung zusammengefasst", "jQuery-Tabellen-(table)-Bediener-Techniken zusammengefasst", "jQuery-Erweiterungs-Techniken zusammengefasst", "jQuery-klassische-Effekte zusammengefasst", "jQuery-Animationen und -Effekte zusammengefasst" und "jQuery-Selektor-Verwendung zusammengefasst"

Ich hoffe, dass dieser Artikel Ihnen bei der jQuery-Programmierung hilft.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Haftung. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und geben Sie relevante Beweise an. Sobald die Inhalte als rechtswidrig bestätigt werden, wird diese Website die fraglichen Inhalte sofort löschen.)

Grundlegende Anleitung

Vielleicht gefällt dir