CODEWITHSUNDEEP
jquery
afro360
afro360

Reputation: 620

Jquery .animate() delay on .mouseleave()

I have the following:

$(document).mousemove(function(event) {   
    if (event.pageX == 0) {
        $("#nav").animate({
            marginLeft: '0px',
        });  
    }        
});

$("#nav").mouseleave(function(event) {   
    $(this).animate({
        marginLeft: '-220px',
    });      
    alert('hi');  
});

Basically I have a slider coming out the left side of the webpage.The problem is on .mouseleave() it does not animate the slider back to -220px. Sometimes it does but it has some kind of delay. Its strange because the alert triggers instantly. How can I improve this?

Upvotes: 0

Views: 85

Answers (2)

Sarathi
Sarathi

Reputation: 1031

The issue is due to the fact that the mouseMove event is queuing up one animation each time the mouse moves over x=0. This is causing all of those animations to run to completion before the mouseleave animation can take effect.

A simple fix for this is to add .stop() calls before running .animate(). This will stop all animations in queue so the .animate() call will take effect immediately.

$(document).mousemove(function(event) {   
    if (event.pageX == 0) {
        $("#nav").stop().animate({
            marginLeft: '0px',
        });  
    }        
});

$("#nav").mouseleave(function(event) {
    $(this).stop().animate({
        marginLeft: '-220px',
    });
});

Upvotes: 2

mikea80
mikea80

Reputation: 127

I would use the new way: $( selector ).on( "mouseenter mouseleave", handlerInOut );

Here is the FIDDLE: http://jsfiddle.net/mikea80/pmGfp/

Here is the code:

$('div').on( "mouseenter", function() {
     $('p').text('you are over');
});

$('div').on( "mouseleave", function() {
     $('p').text('you are out');  
});

Hope this helps

Upvotes: 0

Related Questions