Prototype/Scriptaculous Slider

JavaScript
1

Hi,

I have the below code which creates a simple slider where the image moves when when you hover over it and moves down when you move the mouse out. The

problem is that if you move the mouse in and then out quickly (before the blind up has finished) the image gets stuck at the top. I would like it so that

the image always moves back down when the mouse isn’t hovering over it. I need to achieve this using Prototype/Scriptaculous. Possible?


<html>
<head>
<title>script.aculo.us example</title>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
   

<script type="text/javascript">
   function ProductSlide(element){
       new Effect.toggle(element,'Blind', {duration:3});
   }
   </script>

</head>
<body>

<div onmouseover="ProductSlide('myimage');" onmouseout="ProductSlide('myimage');" style="height:102px;width:130px;position:relative;">

	<div id="mydescription" style="position:absolute;z-index:-1">
    		<p>Hello</p>
	</div>


	<div id="myimage">
    		<img src="http://www.tutorialspoint.com/images/scriptaculous.gif" alt="script.aculo.us" />
	</div>

</div>

</body>
</html>

There is an example of what i would like to achieve here but it uses Jquery:
http://dgcraft.free.fr/themes-prestashop/