Friday, August 11, 2006

Cool Fade Javascript

This fade script can be applied to any div tag or element.

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout(\"changeOpac(\" + i + \",\'\" + id + \"\')\",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(\"changeOpac(\" + i + \",\'\" + id + \"\')\",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = \"alpha(opacity=\" + opacity + \")\";
}

Example Usage

this would fade in fully over 5 seconds

opacity("mydivtag",0,100,5000);


this would fade out fully over 3 seconds

opacity("mydivtag",100,0,3000);

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home