Question

I have made some hover states the show a div on hover of an element. It works really nice although if I move my mouse a few times quickly over it then it seems to break and the div no longer shows until i refresh the page.

Any ideas what might cause this as it has me baffled.

$('#s2_coffeetable').hover(function() {
    $('#popup1').stop().animate({
        opacity: 'toggle'
    }, 5)
}, function() {
    $('#popup1').stop().animate({
        opacity: 'toggle'
    }, 5)
});
$('#s2_drinks').hover(function() {
    $('#popup2').stop().animate({
        opacity: 'toggle'
    }, 100)
}, function() {
    $('#popup2').stop().animate({
        opacity: 'toggle'
    }, 100)
});

Answer 1

Try this .stop( [clearQueue] [, jumpToEnd] ) jQuery reference…

.stop(true, true)

Pass these 2 parameters to stop function.