Hoy compartiré con ustedes un pequeño ejemplo de usar Animate para lograr el efecto de conmutación deslizante
Todos saben que jQuery proporciona algunos métodos para lograr un efecto deslizante:
1.slididown ()
2.SlideUp ()
3.slidetoggle ()
Sin embargo, el deslizamiento anterior no es conveniente para controlar la dirección de su deslizamiento, así que escribamos uno por nosotros mismos. . .
El código es el siguiente:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-oquiv = "x-ua compatible" content = "ie = edge, chrome = 1"> <title> ejemplos </title> <meta name = "Descripción" Content = ""> <meta name = "Key Words" Content = ""> "" Title> TEXTO/CHS/"TEXTO" TEXTO " cuerpo {ancho: 100%; Altura: Auto; } .content {ancho: 150px; Altura: 50px; Posición: Absoluto; Arriba: 20px; Izquierda: 20px; desbordamiento: oculto; Color de fondo: rojo; } .Slide-Box {ancho: 300px; Posición: relativo; } .slide1 {ancho: 150px; Altura: 50px; flotante: izquierda; Pantalla: bloque en línea; Línea de altura: 50px; Text-Align: Center; Color de fondo: #bdd8cf; } .slide2 {ancho: 150px; Altura: 50px; flotante: correcto; Pantalla: bloque en línea; Línea de altura: 50px; Text-Align: Center; Color de fondo: #C1C4C4; } </style> </head> <body> <div> <div> <span>Element on the left</span> <span>Element on the right</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").El código anterior puede lograr un efecto deslizante completo. Pero una cosa a tener en cuenta
Como se muestra en la figura anterior, el evento stop () debe agregarse para evitar múltiples eventos generados cuando el mouse se mueve rápidamente, formando un equipo de pila, causando el efecto de deslizar o incluso flashear después de que se retira el mouse.
El artículo anterior Animate se da cuenta del efecto de conmutación deslizante [código de ejemplo] es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.