Question

I have made a quick fiddle: http://jsfiddle.net/tLLB4/

Ok, so the premise is, i’m hovering over an element and popping out another element. However the users mouse will stay in the same position causing the jumping hover behaviour. Can anyone think how to solve this?

Relevant code:

$('.trigger').hover(function(){
    $('.toShow').animate({
        marginLeft: '+=150'
    });
}, function(){
    $('.toShow').animate({
        marginLeft: '-=150'
    });
});

​

Answer 1

Something like this, maybe?

http://jsfiddle.net/tLLB4/20/

$('.toShow').hover(function(){
    $(this).stop().animate({
        marginLeft: '0'
    });
}, function(){
    $(this).stop().animate({
        marginLeft: '-150'
    });
});

You need to run the hover off the .toShow div otherwise it will try to disappear again when it starts to open and your curser stays where it is.