Image rollovers with Spry fade possible?

Question

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.

Answer 1

quote:
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.
Hi, I have no relevant eixperience with the Spry ajax
framework, but it can be solved with
mootools framework 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