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> ...
Autor
¿Buscas trabajo de programador?
2 respuestas a “Mouseenter & Mouseleave animation con jQuery”
Deja una respuesta
109 artículos que te podrían interesar
Ver más sobre
[…] 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 […]