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

Heim

Web-Frontend

H5-Tutorial

So implementieren Sie den Schiebeschalter nach links und rechts in jQuery

Mar 27, 2018 pm 04:41 PM

jquery um 滑动

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:

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

Nach dem Login kopieren

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

Die Demo ist wie folgt:

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

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!

Erklärung dieser Website

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