Question

i have a div when hovered over and second image slides up and when the mouse leaves it slides back down, the animation is exactly how i want it but if you mouse in and out too quickly without the letting the animation finish it bugs and will only go to the height which you left the animation. Any help would be really helpful been looking at different blogs for days on it and i can’t seem to find a fix, I’m using prototype and sciptaculous here’s my code:

$('mid_about_us').observe('mouseenter',function() {
$('about_us_mo').slideDown({duration: 0.5});
}); 
$('mid_about_us').observe('mouseleave',function() {
$('about_us_mo').slideUp({duration: 0.5});
}); 

#about_us_mo{
position: absolute;
float: left;
bottom: 452px;
left: 4px;
z-index:99999;
overflow: hidden;

}

Answer 1

You need to use the Scriptaculous Effects Queue.

Your handlers are firing immediately and asynchronously as soon as the events happen, so when the events happen very quickly the handlers overlap and conflict with each other. What you really want is for them to line up in a queue and execute sequentially, as soon as the one before them is finished.

Here’s a really good article about it:
http://script.aculo.us/docs/EffectQueues.html

Your code will look like this:

$('about_us_mo').slideDown({duration: 0.5, queue: 'end'});

You can also do things like create multiple effect queues if they interfere with each other. The article does a good job explaining all of it.

HTH
-Ken