[JS] Fade script, content wil niet opkomen.

[DeepFreeze.NL]

Ik ben bezig om met behulp van javascript een fade script te maken waarmee een div verdwijnt en een andere automatisch tevoorschijn komt. Nu heb ik van internet een deel van een script gehaald en zelf een stuk bijgeschreven.

Wanneer ik met behulp van een onClick event de functie fader start, dan verdwijnt netjes de oldDiv, de nieuwe div (newDiv) komt alleen niet tevoorschijn...

Wie o wie ziet het probleem en kan mij een beetje op weg helpen ?

JavaScript:

//  Global JS variable to hold obj of ElementID for item we are fading
var ElementID = "";
var ReducingFinished = false;
var ElementOpacityLevel = 100;
var OpacityLevelIncrement = 5;    //  Percentage value: 1-100
var FadeDelayMS = 60;             //  Milliseconds

// Functie voor het oproepen van de benodigde content.
function fader(oldDiv, newDiv) {    
    // Verbergen van de oude div.
    ElementID = document.getElementById(oldDiv);
    reduceOpacity();
    // Als het verbergen klaar is, de nieuwe div laten verschijnen.
    if (ReducingFinished == true) {
        ElementOpacityLevel = 0;
        ElementID = document.getElementById(newDiv);
        increaseOpacity();
    }
}

//  Makes element more visible
function increaseOpacity() {
    //  Check to make sure the ElementID is already set as visibility=visible
    if (ElementID.style.visibility != "visible") {
        ElementID.style.visibility = "visible";
    }
    if (ElementID.style.display != "") {
        ElementID.style.display = "";
    }
    
    //  If opacity level is less than 100, we can still increase the opacity
    if ((ElementOpacityLevel < 100) && (ReducingFinished == true)) {
        ReducingFinished = true;
        ElementOpacityLevel += OpacityLevelIncrement;
        ElementID.style.MozOpacity = ""+(ElementOpacityLevel/100);
        ElementID.style.opacity = ""+(ElementOpacityLevel/100);
        ElementID.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
        setTimeout("increaseOpacity()", FadeDelayMS);
    } else {
        ReducingFinished = false;
    }
}

//  Makes element less visible
function reduceOpacity() {
    //  If opacity level is greater than 0, we can still reduce the opacity
    if ((ElementOpacityLevel > 0) && (ReducingFinished == false)) {
        ReducingFinished = false;
        ElementOpacityLevel -= OpacityLevelIncrement;
        ElementID.style.MozOpacity = ""+(ElementOpacityLevel/100);
        ElementID.style.opacity = ""+(ElementOpacityLevel/100);
        ElementID.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
        setTimeout("reduceOpacity()", FadeDelayMS);
    } else {
        ReducingFinished = true;
    
        //  When finished, make sure the ElementID is set to visibility=hidden
        if (ElementID.style.visibility != "hidden") {
            ElementID.style.visibility = "hidden";
        }
    }
}

[Niemand_Anders]

Het probleem is dat via de interval alleen reduceOpacity wordt aangeroepen. Echter de eerste call wordt naar fader() gedaan. Echter de eerste return value van reduceOpacity (in fader()) is dus false. increaseOpacity wordt dus niet aangeroepen en daardoor wordt de andere div niet zichtbaar.

Je zult in een 'globale' variable de nieuwe div moeten onthouden en op de plaats in reduceOpacity waar nu true wordt terug gegeven, daar roep je increaseOpacity aan. Althans dat is de quickfix. Een betere oplossing zou zijn via de interval fader() aan te roepen.

[DeepFreeze.NL]

Niemand_Anders schreef op woensdag 09 januari 2008 @ 15:15:
Het probleem is dat via de interval alleen reduceOpacity wordt aangeroepen. Echter de eerste call wordt naar fader() gedaan. Echter de eerste return value van reduceOpacity (in fader()) is dus false. increaseOpacity wordt dus niet aangeroepen en daardoor wordt de andere div niet zichtbaar.

Je zult in een 'globale' variable de nieuwe div moeten onthouden en op de plaats in reduceOpacity waar nu true wordt terug gegeven, daar roep je increaseOpacity aan. Althans dat is de quickfix. Een betere oplossing zou zijn via de interval fader() aan te roepen.

Thanks! Logisch natuurlijk (die quickfix). Ik zat weer eens te veel binnen de eigen functie te kijken .