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 "
to kick start the effect. The one prerequisite is that the applied element
contains a "layout".
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:
- gradualfader.js (~3.4 kb)
Then, to apply the effect to any element on your page with a dimension, give
class="gradualfader" declaration, for example:
<img src="test.gif" class="gradualfader" />
<a href="http://www.dynamicdrive.com" class="anotherclass gradualfader"><img src="dd.gif" /></a>
<div style="width: 300px; border: 1px solid gray; background: blue" class="gradualfader">
Some text here
Step 2: At the very bottom of your page following all your
elements (ie: right above the
</body> tag), add the below code
to activate the effect:
gradualFader.init() //activate gradual fader
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)
gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)
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 "
width" defined) in order for it to work.
Per MSDN, an element has layout when one of the below is true:
- It has a width and/or a height specified
- It is an inline-block (display: inline-block)
- It has absolute positioning (position: absolute)
- It is a float (float: left, float: right)
- It is a table element
With that said, the below won't activate the effect in IE:
<p class="gradualfader" />
No gradual fade effect for you!
while the following will:
<p class="gradualfader" style="width: 95%" />
Gradual fade effect works here!