Mouseenter & Mouseleave animation con jQuery
El evento MouseEnter se produce cuando el puntero del ratón está sobre el elemento seleccionado. El método MouseEnter() activa el evento MouseEnter, o atribuye una función a ejecutar cuando se produzca un evento MouseEnter. Este evento se utiliza a menudo junto con el evento MouseLeave.
El evento MouseLeave se produce cuando el puntero del mouse sale del elemento seleccionado. El método mouseleave() activa el evento MouseLeave o atribuye una función a ejecutar cuando se produzca un evento MouseLeave.
En el ejemplo que vamos a ilustrar precisamente hacemos una combinación de ambos. Vamos a tener varios paneles con una imagen que al pasar por encima visualizaremos información al respecto. La imagen se va a desplazar para arriba visualizándose el texto con un efecto parecido al abrir una persiana.
Que necesitaremos para conseguir este efecto con jQuery?
Incluir los estilos necesarios:
.element { border: 1px solid #CCCCCC; background: #EEEEEE; float: left; height: 120px; margin-right: 10px; overflow: hidden; position: relative; width: 317px; } .element a { text-decoration: none; color: #000; } .img, .description { height: 120px; } .img { margin-top: 0; background: #EEEEEE; } .description { background: #EEEEEE; color: #000; font-family: Arial; font-size: 12px; } .description p { padding:0 0 0 5px; }
Incluir la librería jQuery y los scripts necesarios para generar el efecto:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".element").on({ mouseenter: function() { $(this).find('.img').stop().animate({ "margin-top": "-120px" }); }, mouseleave: function() { $(this).find('.img').stop().animate({ "margin-top": 0 }); } }); }); </script>
Y ahora solo queda por ver las etiquetas html a incorporar en tu <body>:
<div class="element"> <a href="https://www.jose-aguilar.com/blog/secciones/prestashop/"> <div class="img"> <img src="images/prestashop.png" /> </div> <div class="description"> <p>En esta página encontrarás un montón de trucos para hacer y mejorar tus tiendas virtuales desarrolladas con Prestashop.</p> </div> </a> </div> ...
[…] Como se puede observar este método es bastante sencillo, desafortunadamente no funcionará si el navegador es muy viejo o no tiene activadas las transiciones. Para esos casos se puede optar por utilizar un framework de JavaScript para que lleve a cabo el procedimiento. Ver como aplicar el efecto persiana con jQuery. […]
[…] Mouseenter & Mouseleave animation con jQuery […]