Aujourd'hui, je partagerai avec vous un petit exemple d'utilisation d'animation pour réaliser l'effet de commutation coulissante
Tout le monde sait que jQuery fournit quelques méthodes pour réaliser un effet mobile:
1.Slidedown ()
2.SLIDEUP ()
3.Slidetoggle ()
Cependant, le glissement ci-dessus n'est pas pratique pour contrôler la direction de son glissement, alors écrivons-nous par nous-mêmes. . .
Le code est le suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome = 1"> <itle> </ title> <meta name = "description" contenu = "> <meta name =" keywords "contenu = contenu =" contenu = "contenu =" Corps {largeur: 100%; Hauteur: Auto; } .Content {width: 150px; hauteur: 50px; Position: absolue; En haut: 20px; Gauche: 20px; débordement: caché; Color d'arrière-plan: rouge; } .slide-box {width: 300px; Position: relative; } .slide1 {width: 150px; hauteur: 50px; flottant: à gauche; Affichage: bloc en ligne; hauteur de ligne: 50px; Texte-aligne: Centre; Color d'arrière-plan: # bdd8cf; } .slide2 {largeur: 150px; hauteur: 50px; flottant: à droite; Affichage: bloc en ligne; hauteur de ligne: 50px; Texte-aligne: Centre; Color d'arrière-plan: # C1C4C4; } </ style> </ head> <body> <div> <div> <span> sur l'élément de gauche </span> <span> sur l'élément de droite </span> </ div> </div> <script src = "js / jQuery-1.11.2.min.js" type = "Text / javascrip $ (". Content"). Hover (function () {$ (". Slide-Box"). Stop (true) .animate ({droite: "150px"}, 'slow');}, function () {$ (". Slide-box"). stop (true) .animate (droite: "0"}, 'Slow');});Le code ci-dessus peut réaliser un effet de glissement complet. Mais une chose à noter,
Comme le montre la figure ci-dessus, l'événement stop () doit être ajouté pour empêcher plusieurs événements générés lorsque la souris se déplace rapidement, formant une équipe de pile, provoquant l'effet du glissement ou même du clignotement après la suppression de la souris.
L'article ci-dessus Animate réalise l'effet de commutation coulissante [Exemple de code] est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.