Mouseenter and Mouseleave

JavaScript   |   1 Comentarios

Have you seen those menus that are hide, and when you put the mouse over them, they appear? Have you seen boxes that changes their colors when the cursor passes over them? Those effects triggering with the movement of the mouse are mouseenter and mouseleave, from jQuery library.

Its very simple, we can think that «mouseenter» means «mouse gets into the element area», and «mouseleave» means «mouse leaves the element area».

So, we are going to try it. Supose we have a div called «menu», with width about 250px, and its CSS produces the left alignment (this is on your hands). That menu will be closed when the page loads (use css attribute «left: -220px;», do not hide all the menu, leave about 30 px visible, play with this value). When we move the mouse over the visible area, the menu will open, and when we remove the cursor, the menu will hide again. All using mouseenter and mouseleave.

Ok, so we need the following jQuery code:

$(document).ready(function(){

    // The cursor gets into the menu area
    $('#menu').mouseenter(function(){
        $(this).animate({'left':'0px'},'fast');
    });

    // The cursor leaves the menu area
    $('#menu').mouseleave(function(){
        $(this).animate({'left':'-220px'},'fast');
    });

});

Simple, right? With animate() we define the ‘left’ position that the menu have to move to, and with ‘fast’ we define the speed (we can change it for ‘slow’, remove it for leaving the default value, or specify a value in ms; fast is equal to 200 ms, default is 400 ms, and slow is 600 ms).

But… here fails something. Mouseenter and mouseleave there not always enough. Sometimes, our menu will crash, opening and closing without stopping. This is because we have not called to the stop() function.

With this function, if some event fires while another one is running, the first will stop and the new one will be launched. So, this is the final code:

$(document).ready(function(){

    // The cursor gets into the menu area
    $('#menu').mouseenter(function(){
        $(this).stop().animate({'left':'0px'},'fast');
    });

    // The cursor leaves the menu area
    $('#menu').mouseleave(function(){
        $(this).stop().animate({'left':'-220px'},'fast');
    });

});

And here is the example for mouseenter and mouseleave jQuery events. I hope it was useful for you. If you want to ask something to us, use the comments form below, as usual.

«The good code is its best documentation.»
.- 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