html - Jquery: Display error with animated and multiple divs on hover -
i have written little jquery, has nice hover effect.
however, on mouse hovers, sccipt seems faulty, seems cause loop of animate effects. (mostly when hover between 2nd , 3rd div)
does have suggestion how fix issue?
http://test.gifix.de/index.php
sorry poor description of problem, sure see once hover bit on example ;)
thanks every help,
scott
your animations queuing up. prevent this, use jquery stop function: http://api.jquery.com/stop/
i updated code include use of stop function. works me. here 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>
Comments
Post a Comment