50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
|
/*
|
||
|
|
* This nice script fades in and out using CSS and JS
|
||
|
|
*
|
||
|
|
* http://www.brainerror.net/scriptsscripts_blendtrans.php
|
||
|
|
*/
|
||
|
|
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 + ")";
|
||
|
|
}
|
||
|
|
|
||
|
|
// When working with multiple opacities you might notice that you
|
||
|
|
// cannot always know the starting opacity when writing the page.
|
||
|
|
// To get arround this I created the function currentOpac(),
|
||
|
|
// it simply retrieves the current opacity of an element and then fades from that.
|
||
|
|
function currentOpac(id, opacEnd, millisec) {
|
||
|
|
//standard opacity is 100
|
||
|
|
var currentOpac = 100;
|
||
|
|
|
||
|
|
//if the element has an opacity set, get it
|
||
|
|
if(document.getElementById(id).style.opacity < 100) {
|
||
|
|
currentOpac = document.getElementById(id).style.opacity * 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
//call for the function that changes the opacity
|
||
|
|
opacity(id, currentOpac, opacEnd, millisec)
|
||
|
|
}
|