<Javascript Fade animation ⁄ >

As you probably know JavaScript has animation capabilities too, I'll talk about that in this snippet, making focus on a fading animation.

It'll be a simple fading animation script, but I hope it'll help you in some way. Nowadays with all frameworks around, it's a very straightforward these kind of user interactions. Please note that these animations may be CPU intensive, so don't animate all your page ^_^''.

Here goes the code:

style.css, just a few layout tweaks, nothing "important" for our script.

Fader.js, our main class. It will have all animation functionalities. It has a queue built-in, this is, you can have many animations in queue, the next one will only start when the previous finished, this is for each instance, you can run multiple animations simultaneous, as long if you create multiple Fader objects instances.

/**

* Fader Class

*

* @author: pedrocorreia.net

*

* @param Object Optional, if not specified, animation settings, must do it.

*

* @return Function Set

* @return Function Fade

* @return Function Add

* @return Function Toggle

* @return Function Clear

*

*/

var Fader = function(/**o*/){

/**

* Get Html Object reference, by its ID

*

* @param String Id Object

* @return Object

*/

var $ = function(id){return document.getElementById(id); };

/**

* Set our html object to animate

*

* @param Object

*/

var _SetObject = function(el){

o = (el && typeof el !== "object") ? $(el) : el;

};

//our html object reference

var o = "";

//set our html object to animate

_SetObject(arguments[0]);

//our queue animation

var _queue = [];

/**

* Add animation to queue

*

* @param Object Animation Settings

* @return this

*/

var _AddQueue = function(anim){

_queue.push(anim);

returnthis;

};

/**

* Clear queue

*

* @return this

*/

var _Clear = function(){

_queue = [];

returnthis;

};

/**

* Toggle last animation added

*

* @return this

*/

var _Toggle = function(){

var _anim = _queue[_queue.length-1];

if(_anim){

_AddQueue({

o: _anim.o,

value: (_anim.value > 50) ? 0 : 100,

step: _anim.step,

speed: _anim.speed,

direction: (_anim.direction === "down") ? "up" : "down",

callback: _anim.callback

});

}

returnthis;

};

/**

* Remove animation from queue

*

* @return this;

*/

var _RemoveFromQueue = function(){

_queue.splice(0,1);

returnthis;

};

/**

* Start animation

* When current animation's finished it'll check if queue's empty

*/

var _Animate = function(){

var anim=(_queue[0] || null);

if(!anim){return;}//check if we have an animation in queue

if(typeof anim.callback==="function"){anim.callback.apply(this);}

if(anim.o){ _SetObject(anim.o); }

var interval = setInterval(

function(){

anim.value += (anim.direction==="up" ? anim.step : -anim.step);

if(anim.value <= 0 || anim.value>=100){

_Set((anim.value<=0)?0:100);

clearInterval(interval);

_next();

}

_Set(anim.value);

}, anim.speed);

};

/**

* Next Animation in queue

**/

var _next = function(){

_RemoveFromQueue();

_Animate();

};

/**

* Set Opacity value

*

* @param Int

*/

var _Set = function(value){

if(!o){return; }

o.style.zoom = 1; //hack IE

o.style.opacity = value / 100;

o.style.filter = 'alpha(opacity=' + value + ')';

};

return{

Set: _Set,

Fade: _Animate,

Add: _AddQueue,

Toggle: _Toggle,

Clear: _Clear

};

};

Our fading animation object has 5 attributes:

o - html object reference, it's optional if you already specified when you created the instance;

value - opacity value

step - increment or decrement value

speed - time in miliseconds that opacity will be incremented or decremented

direction - only 2 possible choices, up or down

callback - you can specify a function that will run each time the animation starts (optional)

We're just instructing Fader class to animate our html object id="console2", to start fading at 100, decrementing 10 in each step, at every 200milliseconds; furthermore we just want to Toggle the animation (this is, reverse the last sequence added, by just switching value and direction), and start immediately the fading sequence.
The example above it's a simple fade-out/ fade-in sequence, but you can make more complex animations.

Init.js, let's create our object and add some animations. I just added the animations on window load, of course you can do it in other event, for example, button click, mouseclick, mouseover, etc, etc.

Just a quick note, apparently setting alpha/ opacity value in IE only works in a html object with a position set, to bypass this issue this script uses "zoom: 1", so if zoom conflicts with your script you can freely change it, but you have to set a position.