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);
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