• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

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:

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.

Directions:

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>

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.