Question

I have written this little jquery, which has a nice hover effect.

However, on certain mouse hovers, the sccipt seems to be faulty, as it seems to cause a loop of animate effects. (Mostly when you hover between the 2nd and 3rd div)

Does anybody have a suggestion how to fix this issue?

http://test.gifix.de/index.php

Sorry for the poor description of the problem, but I am sure you will see it once you hover a bit over the example 😉

Thanks for every help,

Scott

Answer 1

Your animations are queuing up. To prevent this, use the jQuery stop function: http://api.jquery.com/stop/

I updated your code to include the use of the stop function. It now works for me. Here is the updated code:

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#blue-top').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'200'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-top').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-middle').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'200'}, 500);
    $('#blue-bottom').stop(true).animate({height:'80'}, 500);
});
$('#blue-middle').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});

$('#blue-bottom').mouseenter(function(){
    $('#blue-top').stop(true).animate({height:'80'}, 500);
    $('#blue-middle').stop(true).animate({height:'80'}, 500);
    $('#blue-bottom').stop(true).animate({height:'200'}, 500);
});
$('#blue-bottom').mouseleave(function(){
    $('#blue-top').stop(true).animate({height:'120'}, 500);
    $('#blue-middle').stop(true).animate({height:'120'}, 500);
    $('#blue-bottom').stop(true).animate({height:'120'}, 500);
});


});//]]>  

</script>