Question

Ive built a little jquery sliding div on my website that when you hover over the tab, the div slides in from the right, and on the mouse leave event, the div slides back out of view. The problem im having however is if you very quickly move your mouse over the tab then off, then over and keep repeating this the div slides in and out repeatedly; Is there anyway I can stop this?

Thanks

$('.pillars-wrapper').mouseenter(function() {
$('.handle').fadeOut();
    $('.tab-wrapper').animate({
    right: '+=175'
})
});

$('.pillars-wrapper').mouseleave(function() {
$('.tab-wrapper').animate({    
    right: '-=175'
});
$('.handle').fadeIn()
});

Heres a fiddle…

http://jsfiddle.net/FXAcP/

Answer 1

demo http://jsfiddle.net/wVMu6/11/

Sorry man, for your old post – I replied 2 mins back but realized its deleted,

Also please note that you have .tab-wrapper as a main container, I thought I will mention if you will get some random css issue.

Hope this helps, cheers! B-)

code

 $('.pillars-wrapper').mouseenter(function() {
     $('.handle').fadeOut().stop();
    $('.tab-wrapper').animate({
        right: '+=175px'
    }, "slow").stop(true,true);

}).mouseleave(function() {

    $('.tab-wrapper').animate({
        right: '-=175px'
    }, "slow").stop(true,true);
    $('.handle').fadeIn().stop();

});​