Question

ok so in learning this javascript here, im wanting to create a
panel in my html that when a button is clicked, whatever content is in that div, is
faded out and the new content fades in…like..like for example, a jquery gallery.

but since I’m learning i wanna do it myself.

that said, I’m trying to animate the opacity of a dummy div like so:

var daBox = document.getElementById("box");
var hmm;

function beginAnimBox (){
    daBox.style.opacity = 1;
    hmm = setInterval(animBox,5000);

}

function animBox(){
    if(daBox.style.opacity == "1"){
        daBox.style.opacity = -0.1;

    }
}


window.onload = function(){
    beginAnimBox(); 
}

something like this as an example.
logic being (dunno if it makes sense) is that every x seconds, do the code to reduce the opacity value by .1 until 0.

then when fully opaque, I’ll write something later to bring in the new content.

any ideas, tips, links etc.

Answer 1

function animBox(){
    if(daBox.style.opacity == 0){
        clearInterval();
    } else {
      daBox.style.opacity -= 0.1;
    }
}

not a JS ninja, but will probably do the trick.