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

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -