Hoje vou compartilhar com você um pequeno exemplo de uso do Animate para alcançar o efeito de troca deslizante
Todo mundo sabe que o jQuery fornece alguns métodos para obter efeito deslizante:
1.Slidown ()
2.SlideUp ()
3.SLIDETOGGLE ()
No entanto, o deslizamento acima não é conveniente para controlar a direção de seu deslizamento, então vamos escrever um sozinhos. . .
O código é o seguinte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatível" content = "ie = borda, chrome = 1"> <title> exemplos </title <meta name = "" "=" ""> <meta "> <" corpo {largura: 100%; Altura: Auto; } .Content {Width: 150px; Altura: 50px; Posição: Absoluto; topo: 20px; Esquerda: 20px; estouro: oculto; cor de fundo: vermelho; } .slide-box {width: 300px; Posição: relativa; } .slide1 {width: 150px; Altura: 50px; flutuar: esquerda; Exibição: bloco embutido; altura da linha: 50px; Alinhamento de texto: centro; Background-Color: #BDD8CF; } .slide2 {width: 150px; Altura: 50px; Float: Certo; Exibição: bloco embutido; altura da linha: 50px; Alinhamento de texto: centro; Background-Color: #C1C4C4; } </style> </ad Head> <body> <div> <div> <span> elemento à esquerda </span> <span> elemento à direita </span> </div> </div> <script src = "js/jQuery-1.11.2.min.js" type = "text/javascript" charset = "utf-8"> $ (function () {$ (". Content"). hover (function () {$ (". </body> </html>O código acima pode obter um efeito deslizante completo. Mas uma coisa a observar,
Conforme mostrado na figura acima, o evento Stop () precisa ser adicionado para impedir vários eventos gerados quando o mouse se move rapidamente, formando uma equipe de pilha, causando o efeito de deslizar ou até piscar após a remoção do mouse.
O artigo acima Animate percebe que o efeito de comutação deslizante [código de exemplo] é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.