Does anyone know of a way to implement the Spry Fade effect so that the result
is an image that will fade onmouseover and fade out onmouseout?

Ideally I would use .hover, but this is not available, so I have to use
onmouseover and onmouseout.

The problem with this is that if you roll out of the image before the fade is
complete, when you roll in again, the image starts the fade again and does not
fade from where it had gotten to.

I could use setInterval and clearInterval, but I was hoping that Spry would
have a good, fast work around.

Basically I want a button image that fades seamlessly when you rollover it.

Many thanks.

[q]Originally posted by: wriggs
Does anyone know of a way to implement the Spry Fade effect so that the result
is an image that will fade onmouseover and fade out onmouseout?

Ideally I would use .hover, but this is not available, so I have to use
onmouseover and onmouseout.

The problem with this is that if you roll out of the image before the fade is
complete, when you roll in again, the image starts the fade again and does not
fade from where it had gotten to.

I could use setInterval and clearInterval, but I was hoping that Spry would
have a good, fast work around.

Basically I want a button image that fades seamlessly when you rollover it.

Many thanks.[/q]

Hi, I have no relevant eixperience with the Spry ajax framework, but it can be
solved with
http://mootools.net/ easily.

<img src="yourbutton" id="button" onmouseover="fadein();"
onmouseout="fadeout();"/>

<script>
function fadein() {
new Fx.Style( "button", 'opacity', {duration: 1000 } ).start(0.5,1);}
function fadeout() {
new Fx.Style( "button", 'opacity', {duration: 1000 } ).start(1,0.5);}
</script>

Of course you will need to set the 0.5 opacity property via css.
Regards
Bagi Zolt?n