Mouseenter y Mouseleave

JavaScript   |   3 Comentarios

¿Os habéis fijado en esos menús que se esconden en un lado, y al poner el ratón encima aparecen? ¿Habéis visto alguna vez cuadros que cambian de color al colocar el ratón encima? Esos efectos que se disparan al mover el ratón por encima de un elemento están llamados por los eventos mouseenter y mouseleave de jQuery.

Haciendo una traducción literal, mouseenter significa «el ratón entra», y mouseleave «el raton sale». Es bastante intuitivo pensar que un evento mouseenter se dispara cuando el ratón entra en un elemento (pasa por encima), y que un evento mouseleave se dispara cuando el ratón sale del elemento.

Así pues, supongamos que tenemos un div llamado «menu», de unos 250px de ancho, con su correspondiente CSS que lo hace estar pegado a la parte izquierda de la pantalla (esto ya es cosa vuestra). Ese menú estará cerrado al iniciar la página (esto lo conseguimos con css, con el atributo «left», mas o menos, en -220px, dejando 30 a la izquierda de la pantalla, o jugando con estos tamaños). Al pasar el ratón por encima, el menú se abrirá, y al quitar el ratón, el menú se volverá a esconder. Todo esto solo usando mouseenter y mouseleave.

Bien, entonces necesitamos el siguiente código jQuery:

$(document).ready(function(){

    // El cursor entra en el menú
    $('#menu').mouseenter(function(){
        $(this).animate({'left':'0px'},'fast');
    });

    // El cursor sale del menú
    $('#menu').mouseleave(function(){
        $(this).animate({'left':'-220px'},'fast');
    });

});

Simple, ¿Verdad? Con animate() definimos a qué posición ‘left’ debe llegar, y con ‘fast’ la velocidad (podemos cambiarla por ‘slow’, borrarla para dejar el valor por defecto, o especificar un valor en milésimas de segundo; fast equivale a 200 ms, el valor por defecto son 400 ms, y slow equivale a 600 ms).

Pero aquí falla algo. Mouseenter y mouseleave no siempre son suficiente. A veces, nuestro menú se comportará de forma errática, abriendose y cerrándose. Esto es porque en la animación nos ha faltado llamar a la función stop().

Gracias a esta función, si un evento se activa mientras otro estaba en marcha, detendrá el anterior para ejecutar el nuevo. Con lo cual, el codigo queda ahora así:

$(document).ready(function(){

    // El cursor entra en el menú
    $('#menu').mouseenter(function(){
        $(this).stop().animate({'left':'0px'},'fast');
    });

    // El cursor sale del menú
    $('#menu').mouseleave(function(){
        $(this).stop().animate({'left':'-220px'},'fast');
    });

});

Hasta aquí el ejemplo práctico de los eventos mouseenter y mouseleave de jQuery. Espero que os haya resultado útil. Para cualquier duda, debajo tenéis el formulario de comentarios, como siempre.

«El buen código es su mejor documentación»
.- Steve McConnell

¿Te ha gustado el artículo?

(2 votos, promedio: 5,00 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes