2

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.

2
  • 1
    You're not actually incrementally changing your opacity, you just set it to -0.1 and leave it there. see soulSurfer's answer, and note the -= in the ...style.opacity = .. part.
    – Marc B
    Dec 5, 2011 at 19:09
  • I'm not entirely sure what your question is. I had something similar that would change pictures. It would fade out the old picture and fade in the new one. I don't remember the specific code, but I would fade the old picture out and attach a listener to wait until the data was ready (large images take some time to load). This callback would fade the new image into view. It ended up being pretty nifty looking. Dec 5, 2011 at 19:10

5 Answers 5

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

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

2
  • but, I'm assuming JS has high floating point accuracy while doing: -= 0.1, in C for instance, and correct me if I'm wrong, it will never really reach 0.
    – snoofkin
    Dec 5, 2011 at 19:11
  • thanks...question, does it matter that it wont reach 0? since like this, itll always keep going past to negative numbers lol. does it matteR? or should i add a if opacity == 0 brea etc etc? does it matter? thanks
    – somdow
    Dec 5, 2011 at 19:20
2

Style attributes are strings, and need to be parsed as ints or floats in order to make numeric modifications.

So, to gradually change the opacity, you'll need to use parseFloat(element.style.opacity).

1

Much easier solution:

function fade() {
    var anExistingDivId = $('#divId');
    anExistingDivId.fadeTo(1000, 0.1);
}

Seriously, it doesn't get much easier than that :-) The 1000 is animation length in milliseconds (so 1000 milliseconds = 1 second), the 0.1 is the 'opacity' value you want the associated div set to. It can go both ways (as in pushing the opacity up or down). This function would fade the DIV to almost completely transparent in 1 second. Nice and clean.

0

A more flexible approach would be:

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

function fade(el, speed) {
    setInterval(function () {
        el.style.opacity -= .50;
    }, speed);
}

window.onload = function(){
        fade(daBox, 5000); 
}
0

Jeffrey Sweeny is correct. If you're having a problem with the code not processing the opacity it's because you need to convert the opacity to a number before you do any math with it. So try:

element.style.opacity = parseFloat(element.style.opacity) + whatever_you_want_to_increment_by;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.