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 "class=gradualfader
"
to kick start the effect. The one prerequisite is that the applied element
contains a "layout".
Another Web 2.0 effect for the masses!
Demos:
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
it a 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
</div>
xcxcxc
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:
<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
Customizing
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.
Limitations
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!
</p>
while the following will:
<p class="gradualfader" style="width: 95%" />
Gradual fade effect works here!
</p>
Non Obtrusiveness
This script is designed to work in an non obstructive fashion. Browsers that have JavaScript turned off will simply see the elements in their untouched, original state.