I am looking to create a dynamic menu item that moves out 5px on mouseover and returns to its original position using Scriptaculous. I have implemented the afterFinish callback to ensure that the bump-out effect is completed before the item moves back in.
However, I am facing an issue where the item does not return to its original position if the mouseover and mouseout actions are done quickly multiple times. The more I repeat this action, the further off the item gets from its original position. I believed that the afterFinish callback should prevent this behavior. It seems to work fine with the Morph effect but not with other Scriptaculous effects as mentioned in the following link:
Javascript - Scriptaculous - Effect Callback function
I have tried implementing effects queues to solve the issue, but the result remains the same. I have spent hours searching various forums for solutions with no luck.
Below is an example of the Morph effect that works correctly:
<SCRIPT>
function morphMe(obj) {
new Effect.Morph($(obj), {
style: {
height: '200px',
width: '200px'},
afterFinish: function(){ new Effect.Morph($(obj), {
style: {
height: '20px',
width: '200px'}});
}
})
}
</SCRIPT>
<div id="bumptest" class="leftnav" style="position: absolute; left: 100px; width: 200px; border: 1px solid green" onmouseover="morphme(this);">Morph Me</div>
Here is an example of the Move effect that does not behave as expected when there are quick mouseover-and-outs. I am considering using setTimeout, but I am unsure why it would be necessary.
<SCRIPT>
function OnFinish(obj){
new Effect.Move(obj.element.id, {x: -5, y: 0, duration: .4});
}
function bumpOut(myObject){
new Effect.Move(myObject,
{ x: 5,
y: 0,
duration: 0.4,
afterFinish: OnFinish,
});
}
</SCRIPT>
<div id="bumptest" class="leftnav" style="position: absolute; left: 100px; width: 200px; border: 1px solid green" onmouseover="bumpOut(this);">Bump me right and then back</div>
Any assistance, whether through modifying setTimeout or directing me to a reliable script that accomplishes this goal, would be greatly appreciated.
Thank you,
motorhobo