suchen

Heim >Web-Frontend >js-Tutorial >animate implementiert den Gleitschalteffekt [Beispielcode]_jquery

animate implementiert den Gleitschalteffekt [Beispielcode]_jquery

WBOY
WBOYOriginal
2016-05-16 15:01:501357Durchsuche

Heute möchte ich Ihnen ein kleines Beispiel für die Verwendung von Animate zur Erzielung eines gleitenden Umschalteffekts vorstellen

Jeder weiß, dass jQuery mehrere Methoden bietet, um den Gleiteffekt zu erzielen:

1.slideDown()
2.slideUp()
3.slideToggle()

Aber das obige Schieben ist nicht praktisch, um die Schieberichtung zu steuern, also können wir genauso gut selbst eines schreiben. . .

Der Code lautet wie folgt: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css">
      body{
        width: 100%;
        height: auto;
      }
      .content{
        width: 150px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 20px;
        overflow: hidden;
        background-color: red;
      }
      .slide-box{
        width: 300px;
        position: relative;
      }
      .slide1{
        width: 150px;
        height: 50px;
        float: left;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #BDD8CF;
      }
      .slide2{
        width: 150px;
        height: 50px;
        float: right;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        background-color: #C1C4C4;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="slide-box clearfix">
      <span class="slide1">左边的元素</span>
      <span class="slide2">右边的元素</span>
    </div>
    </div>
    
    
  <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(function(){
      $(".content").hover(function(){
        $(".slide-box").stop(true).animate({right:"150px"},'slow');
      },function(){
        $(".slide-box").stop(true).animate({right:"0"},'slow');
      });
    })
  </script>
  </body>
</html>

Der obige Code kann einen vollständigen Gleiteffekt erzielen. Aber eines gibt es zu beachten,

Wie im Bild oben gezeigt, muss ein stop()-Ereignis hinzugefügt werden, um zu verhindern, dass mehrere Ereignisse, die bei schnellen Mausbewegungen generiert werden, einen Stapel bilden, was dazu führt, dass die Maus nach dem Entfernen immer noch gleitet oder sogar blinkt.

Die obige animierte Implementierung des Sliding-Switching-Effekts [Beispielcode] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.

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：Ichart.js-Implementierungscode zum Zeichnen gepunkteter Linien und zum Mitteln von gepunkteten Linieneffekten_Javascript-FähigkeitenNächster Artikel：Ichart.js-Implementierungscode zum Zeichnen gepunkteter Linien und zum Mitteln von gepunkteten Linieneffekten_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen