Fades

Hi. This is the demo page of a new technique of JavaScript powered fades.

Just hover over this paragraph.

See? It fades. Whoa.

Your Own Fade in Three Steps

Step One: Simple CSS

Write your basic CSS rules for the start and end states. Example:

.quickdemo {
    margin          : 10px;
    height          : 40px;
    line-height     : 40px;
    text-align      : center;
    background      : #EEE;
    font-size       : 1em;
    color           : #D44;
    border          : 1px solid #CCC;
}
.quickdemo:hover {
    background      : #FFF;
    border-color    : #000;
    color           : #F00;
    font-size       : 2em;
}

These rules should be inserted into one of your stylesheets so that the browser recognizes it.

Step Two: Fade Options

That fader needs to know what to fade, when to fade and how to fade. Create a new CSS-file and put the following lines into it:

.quickdemo:-js-action(:hover) { /* fade on :hover */
    -js-fade-steps  : 8;        /* from .quickdemo to .quickdemo:hover in 8 steps */
    -js-fade-delay  : 15ms;     /* delay between steps */
}

One day I will explain this one.

Step Three: Include Fade Script

Now you have to include the fading script into the HTML code. Download the necessary files (Dean Edward's cssQuery-p.js, my script.js and my mod_fade.js), put them into an appropriate directory and link them in your HTML. Example: 

<script src="cssQuery-p.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="mod_fade.js" type="text/javascript"></script>

Finally, you have to tell the script the location of your options file. Therefore, insert a style element with a Conditional Comment @importing your options file: 

<style type="text/css">
/*[if js]/ @import url('fade.css') -js-fade; /[endif]*/
</style>

That's it. Tada.

More Demos

Currently there is only one further demo:

This is a demonstration of what can be achieved by changing the background-position (yep, the image isn't faded, but the position). Look at the background image used for the effect.

Notes