Bookmark to del.icio.us
FF1+ IE5+ Opr8+
Gradual Element Fader
Description: This is a generic fader script
that can be applied to element(s) on the page to make them gradually fade into
view when the mouse rolls over them, and fade out when out. Just give the desired elements on the page a "
Another Web 2.0 effect for the masses!
Step 1: Insert the below into the HEAD section of your page:
The above code references an external js file, which you need to download:
Then, to apply the effect to any element on your page with a dimension, give
<img src="test.gif" class="gradualfader" />
Step 2: At the very bottom of your page following all your
elements (ie: right above the
You can fine tune the effect if you wish inside the .js file:
gradualFader.baseopacity=0.4 //set base opacity when
mouse isn't over element (decimal below 1)
The first variable sets the default opacity of participating elements when the mouse isn't over them (0=completely opaque, 1=fully normal). The second controls how fast the fade effect animates- the larger the number, the faster.
In IE, with the exception of images, the element you're applying the effect to must have a
"layout" (such as a "
With that said, the below won't activate the effect in IE:
<p class="gradualfader" />
while the following will:
<p class="gradualfader" style="width: 95%" />