Heute werde ich Ihnen ein kleines Beispiel für die Verwendung von Animate zur Erzielung von Schieberschaltwirkung teilen
Jeder weiß, dass JQuery einige Methoden bietet, um einen Gleiteffekt zu erzielen:
1.Slidedown ()
2.Slideup ()
3.Slidetoggle ()
Das obige Schieben ist jedoch nicht bequem, um die Richtung seines Gleitens zu steuern. Schreiben wir also eine selbst. . .
Der Code ist wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-kompatible" content = "ie = edge, Chrome = 1"> <Titel> Beispiele </title> <meta name = "content ="> <"> <meta name =" keywords "content" Körper {Breite: 100%; Höhe: Auto; } .Content {width: 150px; Höhe: 50px; Position: absolut; Top: 20px; links: 20px; Überlauf: versteckt; Hintergrundfarbe: Rot; } .slide-box {width: 300px; Position: Relativ; } .slide1 {width: 150px; Höhe: 50px; float: links; Anzeige: Inline-Block; Zeilenhöhe: 50px; Text-Align: Mitte; Hintergrundfarbe: #Bdd8cf; } .slide2 {width: 150px; Höhe: 50px; float: rechts; Anzeige: Inline-Block; Zeilenhöhe: 50px; Text-Align: Mitte; Hintergrundfarbe: #C1C4C4; } </style> </head> <body> <div> <div> <span> Element links </span> <span> Element rechts </span> </div> </div> <script src = "js/jQuery-1.11.2.Min.js" Typ = "text/javascript" charset "utf-8") </utf-8 ") </utf-8") </</</</</</</</</</</</</</</</</</tecript ") </</utf-8") </</</</</</</</</</uScript (utf-8 "(utf-8" (utf-8 $ (". Inhalt"). Hover (Funktion () {$ (". Folie"). Stop (true) .Animate (rechts: "150px"}, 'langsam');}, function () {$ (". Slide-Box")Der obige Code kann einen vollständigen Gleiteffekt erzielen. Aber eine Sache zu bemerken,
Wie in der obigen Abbildung gezeigt, muss das Stop () -Ereignis hinzugefügt werden, um mehrere Ereignisse zu verhindern, die erzeugt werden, wenn sich die Maus schnell bewegt, wodurch ein Stapelteam bildet, wodurch die Auswirkung des Gleitens oder sogar Blinkens nach Entfernung der Maus führt.
Der obige Artikel Animate erkennt, dass der Schieberschalt -Effekt [Beispielcode] der gesamte Inhalt ist, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.