mouse enter mouse leave slidedown animation error - prototypejs

Question

I have a piece of code for showing a picture that slides up from a div when the mouse enters the div, the code works exactly how i want except it bugs when the mouse hovers in and out too quickly and the animation doesn't have time to complete, I've already changed from mouseover and mouseout, to mouseenter and mouseleave and this hasn't seemed to help, any suggestions would be great
<script type="text/javascript">
document.observe("dom:loaded", function() {
var effectInExecution=null;
$('mid_about_us').observe('mouseenter', function() {
if(effectInExecution) effectInExecution.cancel();
effectInExecution=new Effect.SlideDown('about_us_mo',{style:'height:140px;', duration: 1.0 });
});
$('mid_about_us').observe('mouseleave', function() {
if(effectInExecution) effectInExecution.cancel();
effectInExecution=new Effect.SlideUp('about_us_mo',{style:'height:0px;', duration: 1.0 });
});
});

Answer 1

I wrote a Prototype class a while back to solve this problem, the issue can be fixed by supplying a scope parameter to the effect options. anyway here is the class i wrote:
var DivSlider = Class.create();
Object.extend(DivSlider, {
toggle: function(selector, element, options) {
element = $(element);
this.options = Object.extend({
duration: 0.5,
fps: 35,
scope: 'DivSlider',
forceOpen: false
}, options || {});
var toggle = element.visible();
if (toggle && this.options.forceOpen) {
//already open, leave.. still call callback
(this.options.after || Prototype.emptyFunction)
.bind(this, element)();
return;
}
var effects = new Array();
if (toggle) {
effects.push(new Effect.SlideUp(element, {
sync: true
}));
} else {
$$(selector).each(function(el) {
if ((element !== el) && el.visible()) {
effects.push(new Effect.SlideUp(el, {
sync: true
}));
}
});
effects.push(new Effect.SlideDown(element, {
sync: true
}));
}
new Effect.Parallel(effects, {
duration: this.options.duration,
fps: this.options.fps,
queue: {
position: 'end',
scope: this.options.scope
},
beforeStart: function() {
(this.options.before || Prototype.emptyFunction)
.bind(this, element)();
}.bind(this),
afterFinish: function() {
(this.options.after || Prototype.emptyFunction)
.bind(this, element)();
}.bind(this)
});
}
});
and to use it in your case you would simply use:
DivSlider.toggle('div.your_class', your_id);
in your enter/leave code, it can handle multiple div's of the same class also, allowing only one div per class to be open at any single time. If this does not fit your needs you can easily deconstruct the class to get the code you actually need.