So implementieren Sie den Schiebeschalter nach links und rechts in jQuery-H5-Tutorial-php.cn

So implementieren Sie den Schiebeschalter nach links und rechts in jQuery

php中世界最好的语言

Freigeben： 2018-03-27 16:41:15

Original

3640 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!