suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man die Umschaltmethode für das Schieben nach links und rechts mit jQuery?

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

亚连
亚连Original
2018-06-01 16:12:192079Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie implementiert man die Konvertierung von Wertübergabe und URL-Codierung in JS-Formularen?Nächster Artikel：Wie implementiert man die Konvertierung von Wertübergabe und URL-Codierung in JS-Formularen?

In Verbindung stehende Artikel

Mehr sehen