Jeg har kæmpet med hatigheden som af en eller anden grund, som jeg ikke har kunet finde, altid varer mindst et sekund, i denne udgave har jeg faktisk sat den til 1/10 sek. men den fremturer ...
Men nu skulle display:none være integreret:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Fade transition</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/486056"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container{
position:relative;
top:0px;
left:0px;
}
.fadeDiv{
align: center;
position:absolute;
width:150px;
height:255px;
z-index:0;
left: 570px;
top: 180px;
display: block;
}
</style>
<script type="text/javascript" language="JavaScript">
var intVal = 5;//time between changes
var nyDivs = new Array(),actDiv=0;
var OpC = new Array();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1)
function startOpChange(elm,end,tim){
if(!ie&&!moz)return;
var idx = OpC.length;
for(var i=0;idx>i;i++){
if(OpC[i][0]==elm){
clearInterval(OpC[i][4]);
idx = i;
break;
}
OpC[idx] = new Array();
}
if(idx==0)OpC[idx] = new Array();
if(ie)actOp=elm.filters.alpha.opacity;
else actOp=Math.round((elm.style.MozOpacity*100));
if (actOp!=end){
elm.style.display='block';
OpC[idx][0]=elm;
OpC[idx][1]=actOp;
OpC[idx][2]=end;
OpC[idx][3]=(end>actOp)?1:-1;
var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
//alert(tim*1000+"\n"+delayTime);
OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
}
}
function opChange(idx){
OpC[idx][1]+=OpC[idx][3];
if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
else OpC[idx][0].style.MozOpacity=Math.min(0.9999,OpC[idx][1]/100);
if (OpC[idx][1]==OpC[idx][2]){
clearInterval(OpC[idx][4]);
if(OpC[idx][1]==0)OpC[idx][0].style.display='none';
return;
}
}
function fadeOver(){
startOpChange(nyDivs[actDiv],0,0.1);
actDiv = ++actDiv%nyDivs.length;
startOpChange(nyDivs[actDiv],100,0.1);
}
function initNyhed(){
var divs = document.getElementsByTagName('DIV');
for(i=0;divs.length>i;i++){
if(divs[i].id.match(/^nyhed/)){
nyDivs[nyDivs.length] = divs[i];
}
}
setInterval('fadeOver()',(intVal-0.1)*1000)
}
</script>
</head>
<body onload="initNyhed()">
<br>
<div id="container">
<div id="nyhed0" class="fadeDiv" style="filter:alpha(opacity=100);-moz-opacity:1;">Nyhed nummer 1</div>
<div id="nyhed1" class="fadeDiv" style="filter:alpha(opacity=0);-moz-opacity:0;display:none;">Nyhed nummer 2</div>
<div id="nyhed2" class="fadeDiv" style="filter:alpha(opacity=0);-moz-opacity:0;display:none;">Nyhed nummer 3</div>
<div id="nyhed3" class="fadeDiv" style="filter:alpha(opacity=0);-moz-opacity:0;display:none;">Nyhed nummer 4<br><a href="#">Dette er et link</a></div>
<div id="nyhed4" class="fadeDiv" style="filter:alpha(opacity=0);-moz-opacity:0;display:none;">Nyhed nummer 5</div>
</div>
</body>
</html>
-- og velbekomme '-)
