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.

mouseenter-mouseleave

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>
...

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(7 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

2 respuestas a “Mouseenter & Mouseleave animation con jQuery”

  1. […] 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. […]

  2. […] Mouseenter & Mouseleave animation con jQuery […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre