Gradual Fader

[metdude72]

1) Script Title: Gradualfader.js

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...der.htm#layout

3) Describe problem:

Not really a problem but perhaps a question on how to improve the script.

I would like to know if the element that is being faded can can have a gradual decrease (back to the faded estate) after the mouse hovers over the object.

The default behaviour takes the object from faded to not faded, but on mouse out it goes back to fully faded instantly instead of going to faded gradually.

I am playing around with the value for the gradualFader.increment= at 0.025 and it works really well, but would love to see it going at the same speed the other way. Hope I am being clear.

Thanks in advance for your answers.

[ddadmin]

Hmmm if I understand you correctly, are you saying the "fade out" right now is instantaneous, instead of the gradually like in "fade in"? It is gradual already actually, both fade in and fade out.

[Twey]

<p class="gradualfader" />
No gradual fade effect for you!
</p>

Um... that's never going to work, the <p> is closed before the text (in both HTML and XHTML, though I suspect most HTML parsers will simply ignore it).

[metdude72]

Hmmmm, after reading your reply you made me go back and look closely to what I had done.

It turns out that I left some details out of my first post. So here it goes.

The item in which I am applying the effect to is an unordered list that through css creates a menu with a mouseover effect that switches two images, the background image when the mouse is not over is a dark gray gradient, and on mouse over is a light blue gradient.

So after I apply the class to the list item the text is faded which is ok and on mouse over the 2nd image comes up and gradually fades "in" to give that glow effect but as soon and the mouse goes out the image disappears and what fades out is only the text but not the background light blue gradient image.

So the effect is indeed working but the strange behaviour is the fact that the fade out only applies to the text and not both image and text.

Thanks.

[metdude72]

For some reference this website uses the idea of the fade in and out, I suppose through a proprietary script. But it is what I was hoping to achieve with the gradualfader.

http://dragoninteractive.com/

[ddadmin]

It'd be a lot easier if you have a link to your own page (the problematic one) to compare with the link above.