Wie implementiert man die Umschaltmethode für das Schieben nach links und rechts mit jQuery?-js-Tutorial-php.cn

Wie implementiert man die Umschaltmethode für das Schieben nach links und rechts mit jQuery?

亚连

Freigeben： 2018-06-01 16:12:19

Original

2035 Leute haben es durchsucht

Jetzt werde ich Ihnen eine jQuery-Umschaltmethode vorstellen, mit der Sie das Verschieben nach links und rechts erreichen können. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Wir wissen, dass jQuery zum Auf- und Abbewegen verwendet wird und Sie die Methoden slideUp() und slideDown() direkt verwenden können.

Die Methoden slideUp() und slideDown() ändern nur die Höhe des Elements. Wenn der Anzeigeattributwert eines Elements „none“ ist, wird das Element beim Aufruf der slideDown()-Methode von oben nach unten angezeigt. Die Methode slideUp() ist genau das Gegenteil. Das Element wird von oben nach unten gekürzt und ausgeblendet.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).slideToggle(300);
   });
  });
 </script>
</body>
</html>

Nach dem Login kopieren

Wie wäre es also mit dem Hinein- und Herausgleiten nach links und rechts?

Die Demo ist wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).animate({width:&#39;toggle&#39;},350);
   });
  });
 </script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt folgt:

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

tutorial zur Nginx-Bereitstellung des vue.js-Projekts

Beispiel zur Mint-UI-Nutzung in Vue

So ermitteln Sie, ob die Seite Bildlaufleisten durch JS hat

Das obige ist der detaillierte Inhalt vonWie implementiert man die Umschaltmethode für das Schieben nach links und rechts mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!