Page-Details : Fade Anything Technique | JavaScriptSource

Page-Details : Fade Anything Technique

Adam Michela Dec 11, 2006

General

Need to draw attention to something new on your Web page? Only need to show it for a moment or two? This script will highlight it in a subtle manner (or boldly, if you choose).


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Notes

Basic:

Choose the element, such as a paragraph, you would like to spotlight and give it a class of "fade":

Watch me fade

The paragraph will fade from the default color of yellow (#FFFF33) to whatever it's native background color is.

Advanced

Change the default fade from color:

<p id="paragraph1" class="fade-0066FF">Watch me fade from Blue</p>

Fade an element after the page load from a script (such as after an Ajax transaction):

Fat.fade_element("paragraph1")

The Fat.fade_element() function accepts several arguments: Target ID, Frames Per Second, Fade Duration, Fade Color, Final Color.

For example, if you wanted to fade paragraph1 from red to green at 60 frames per second for 10 seconds:

Fat.fade_element("paragraph1", 60, 10000, "#FF0000", "#00CC00")

Please note, the ID of the element is a required argument. As such all elements that you wish to fade (even by class) must have some unique ID. The ID can be anything.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: fadeAnything.js


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(4 comments)

This was exactly what I was looking for--thanks![br /][br /]P.S. It doesn't seem to work in Safari.[br /][br /]P.P.S. Any way to get a delay before it starts to fade?

Michael Oct 31, 2008

Yes, Steven, it's supposed to do that. It can flicker or just fade, as shown in the example. The first one flickers (actually it rapidly switches between two colors), the other does not.

Lee Dec 4, 2007

code flickerers

Steven Nov 28, 2007

It is really good!!!

Kenny Jan 1, 2007