Probleem met setTimeout() in fade script

[Vik09]

Hallo allen,

ik ben nog niet zo lang geleden begonnen met het leren van Javascript. Ik ben nu bezig met mijn eerste echte script, namelijk een script om at random een aantal foto's in te laten faden op de achtergrond. Na 15 seconden moeten ze weer uitfaden en komen op andere plekken weer andere foto's. Het gaat alleen faliekant mis wanneer er moet worden uitgefade. Er wordt nu nog maar één plaatje gebruikt om het te testen, maar daar zit het probleem niet.
Hieronder staat de code. Ik heb met commentaar aangegeven waar het volgens mij mis gaat. In het hele script werken de setTimeout()'s goed, behalve op de aangegeven plek. Alvast mij excuses voor de soms wat rare namen van variabelen en functies en het misschien wat omslachtig gescript.

[JS]
images = new Array();
fadedivs = new Array();
fading = false;
xOpacity=0;
xFade=1;


function prep() {
sWidth=screen.width;
sHeight=screen.height;
dAmounthor=5;
dWidth=(sWidth/dAmounthor);
dHeight=(dWidth/(4/3));
dAmountver=Math.floor(sHeight/dHeight);
var i=1;
var m=0;
var n=0;
for (i=1;i<=(dAmountver*dAmounthor);i++) {
div = document.createElement("div");
div.setAttribute("id",i);
style = "width:" + dWidth + "px;height:" + dHeight + "px;position: fixed;margin-left:" + (dWidth*n) + "px;margin-top:" + (dHeight*m) + "px;"
div.setAttribute("style",style);
img = document.createElement("img");
img.setAttribute("src","");
img.setAttribute("style","height:"+dHeight+"px;width:"+dWidth+"px;border: 0px solid black;");
div.appendChild(img);
document.getElementById("00").appendChild(div);
if (m==(dAmountver)) {
n++;
m = 0;
}
else {
m++;
}
}
images = document.getElementById("00").getElementsByTagName("img");
setTimeout("fadex()",50);
}

function fadex() {
if (fading==false) {
var i=0;
xFade=0;
for (i=0;i<=3;i++) {
fadedivs = Math.floor(Math.random()*((dAmountver*dAmounthor)+1));
images[fadedivs].xOpacity = 0;
xOpacity = 0;
images[fadedivs].src = "back.png";
images[fadedivs].style.opacity = images[fadedivs].xOpacity;
images[fadedivs].style.MozOpacity = images[fadedivs].xOpacity;
images[fadedivs].style.filter = "alpha(opacity=" + (images[fadedivs].xOpacity*100) + ")";
fading = true;
}
}

if (fading==true && xOpacity<1 && xFade==0) {
var i=0;
xOpacity=xOpacity+0.1;
for (i=0;i<=3;i++) {
images[fadedivs].xOpacity = images[fadedivs].xOpacity+0.1;
images[fadedivs].style.opacity = images[fadedivs].xOpacity;
images[fadedivs].style.MozOpacity = images[fadedivs].xOpacity;
images[fadedivs].style.filter = "alpha(opacity=" + (images[fadedivs].xOpacity*100) + ")";
}
if (xOpacity==0.9999999999999999) {
xFade=1;
// Hier gaat het fout, er wordt niet 15 seconden gewacht voordat verder wordt gegaan. Ik heb gecheckt of het script ook daadwerkelijk in deze lus terecht komt, en dat is zo.
setTimeout("fadex()",15000);
}
else
{
setTimeout("fadex()",50);
}
}

if (fading==true && xOpacity>0 && xFade==1) {
var i=0;
xOpacity=xOpacity-0.1;
for (i=0;i<=3;i++) {
images[fadedivs].xOpacity = images[fadedivs].xOpacity-0.1;
images[fadedivs].style.opacity = images[fadedivs].xOpacity;
images[fadedivs].style.MozOpacity = images[fadedivs].xOpacity;
images[fadedivs].style.filter = "alpha(opacity=" + (images[fadedivs].xOpacity*100) + ")";
}
if (xOpacity<=0) {
fading=false;
setTimeout("fadex()",50);
}
else
{
setTimeout("fadex()",50);
}
}
}
[/JS]

Kan iemand mij vertellen waar het aan ligt?

Alvast bedankt!

 

[csshunter]

Hoi Vik,
Geen rechtstreeks antwoord, maar een vraag: heb je 'm al eens in de echoput van de JSLint Code Quality Tool geworpen? Die geeft een aantal suggesties voor verbetering.

Succes!
CSS-hunter

 

[That Guy]

Je code is net wat te groot om zo te debuggen, kan je een test-pagina online zetten? (dus met plaatjes, en deze code). Dat is een stuk makkelijker. Of, als je het niet online kan zetten, maak dan even een voorbeeld-html pagina en zet hier de code neer.


:thumb: