suchen

Heim >Web-Frontend >H5-Tutorial >So implementieren Sie den Schiebeschalter nach links und rechts in jQuery

So implementieren Sie den Schiebeschalter nach links und rechts in jQuery

php中世界最好的语言
php中世界最好的语言Original
2018-03-27 16:41:153703Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie den linken und rechten Schiebeschalter in jQuery implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung des linken und rechten Schiebeschalters in jQuery? ein Blick.

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 Attributwert display 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(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

Dann um links und rechts zu erreichen Was ist mit dem Ein- und Ausschieben?

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(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

Der Effekt ist wie folgt:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie den Datei-Upload mit AjaxUpLoad.js

Die Reihenfolge der Bedienung von Vue-Rendering und Plug -im Laden

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Schiebeschalter nach links und rechts in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery JS display
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：Ausführliche Erläuterung der JS-Formularwertübergabe und der URL-CodierungskonvertierungNächster Artikel：Ausführliche Erläuterung der JS-Formularwertübergabe und der URL-Codierungskonvertierung

In Verbindung stehende Artikel

Mehr sehen