Ejercicios de animación jQuery

Código fuente:
<! DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title> jQuery 动画 练习 </title> 
      <style> 
         .wrapper { 
            display: flex; 
            dirección flexible: fila; 
            justificar-contenido: centro; 
         } 
         
         .img-box { 
            color de fondo: beige; 
            ancho: 600px; 
            altura: 600px; 
            desbordamiento: oculto; 
                borde: 1px sólido # 3a7408; 
         } 
         
         .img-box img { 
            ancho: 100%; 
         } 
         
         .button-group { 
            ancho: 600px;
                alineación de texto: centro; 
         } 
         
         div.button { 
            ancho: 200px; 
            margen: 20px automático; 
            altura: 36px; 
            altura de línea: 36px; 
            color: #fff; 
            fondo: rgb (65,168,99); 
            cursor: puntero; 
         } 
      </style> 
   </head> 
   <body> 
      <div class = "wrapper"> 
         <div class = "img-box"> 
            <img src = "img / jubao.jpg" alt = "logo"> 
         </ div > 
         <div class = "button-group" id = "animate-group"> 
            <
            <div class = "button animate2"> alternar </div> 
            <div class = "button animate4"> animate-width </div> 
            <div class = "button animate5"> slideRight </div> 
            <div class = "botón animate6 "> animate-width-linear </div> 
            <div class =" button animate7 "> hide-specialEasing </div> 
            <div class =" button animate8 "> delay-slideUp </div> 
            <div class =" botón animate9 "> cola </div> 
            <div class =" botón animate10 "> 复位 </div> 
         </div> 
      </div> 

      <script type =" text / javascript "src = "js / jquery-3.1.1.min.js"> </script> 
      <script type = "text / javascript"> 
         $ ("# animate-group"). haga clic en (función (e) {
                // Compatibilidad del navegador  
                e = e || window.event; 
                var target = e.target || e.srcElement;
                // Primero determine qué elemento de destino es y luego active el evento correspondiente. 
                // Preste atención para determinar el orden de juicio de acuerdo con la regla burbujeante, y juzgue primero los elementos internos. 
                // Tenga en cuenta que hay varias clases. Target.id también se puede utilizar, pero no se recomienda. 
                if (target.className == 'button animate1') { 
                    $ ("img"). fadeOut (). fadeIn (); 
                } else if (target.className == 'button animate2') { 
                    // mostrar ocultar 
                    $ (" img "). toggle (); 
                } else if (target.className == 'button animate3') { 
                    $ (" img "). slideUp (). slideDown (); 
                } else if (target.className == 'button animate4 ') { 
                    $ (" img "). animate ({width: "- = 160"}, {complete: function () {$ ("img"). Animate ({width: "+ = 160"})}}); 
                    // Implementar el efecto slideRight 
                    // El elemento padre no puede establecer text-align: center;, de lo contrario, no se doblará hacia la derecha, sino hacia arriba hacia el medio. 
                    $ ("img"). animate ({ 
                        width: "hide", 
                        borderRight: "hide", 
                        borderLeft: "hide", 
                        paddingRight: "hide", 
                        paddingLeft: "hide" 
                    }); 
                } else if (target.className = = '
                    $ ("img"). animate ({"width": "+ = 100"}, 500, "linear"); 
                } else if (target.className == 'button animate7') { 
                    // Puede ser diferente Animación css las propiedades especifican diferentes funciones de aceleración  
                    // en animate () en un objeto parámetro, el valor del atributo css se pasa a la matriz [valor objetivo, función de aceleración] 
                    $ ("img"). animate ({ancho: ["ocultar"
                } else if (target.className == 'button animate8') { 
                    $ ("img"). fadeTo (100,0.5) .delay (200) .slideUp (); 
                } else if (target.className == 'button animate9') { 
                    // Usa queue () para agregar una nueva función a la cola. 
                    $ (". img-box"). fadeTo (100,0.5) .delay (200) .queue (function (next) { 
                        $ (this) .text ("hola jubao"); 
                        next (); 
                    }). animate ({ancho del borde:"
                } else if (target.className == 'button animate10') { 
                    window.location.reload (); 
                } else { 
                    // Si no hay ningún elemento de destino coincidente, salga. 
                    return 
                } 
            });

   </body> 
</html>
Ejercicios de animación jQuery

Supongo que te gusta
