Question

Why when calling fadeIn() onLoad does the browser run through the loop immediately. In other words there is an issue with either the setInterval or the Opacityto().

function Opacityto(elem,v){
    elem.style.opacity = v/100;
    elem.style.MozOpacity =  v/100;
    elem.style.KhtmlOpacity =  v/100;
    elem.style.filter=" alpha(opacity ="+v+")";}

function fadeIn(){
elem=document.getElementById('nav');
for (i=0;i==100;i++){
    setInterval(Opacityto(elem,i),100);}
}

I think someone will tell me this can be done easiest with jQuery but I’m interested in doing it with javascript.

Thanks!HelP!

Answer 1

You’ve got several problems with your fadeIn() function:

A. Your for loop condition is i==100, which is not true on the first iteration and thus the body of the for loop will never be executed (the i++ won’t ever happen). Perhaps you meant i<=100 or i<100 (depending on whether you want the loop to run 101 or 100 times)?

B. Your setInterval code has a syntax error EDIT: since you’ve updated your question to remove the quotes – setInterval expects either a string or a function reference/expression. So you need to either pass it the name of a function without parentheses and parameters, or a function expression like the anonymous function expression you can see in my code down below. in the way you try to build the string you are passing it. You’ve got this:

"Opacityto("+elem,i+")"

but you need this:

"Opacityto(elem," + i + ")"

The latter produces a string that, depending on i, looks like "Opacityto(elem,0)", i.e., it produces a valid piece of JavaScript that will call the Opacityto() function.

C. You probably want setTimeout() rather than setInterval(), because setInterval() will run your Opacityto() function every 100ms forever, while setTimeout() will run Opacityto() exactly once after the 100ms delay. Given that you are calling it in a loop I’m sure you don’t really want to call setInterval() 100 times to cause your function Opacityto() to be run 100 times every 100ms forever.

D. Even fixing all of the above, your basic structure will not do what you want. When you call setInterval() or setTimeout() it does not pause execution of the current block of code. So the entire for loop will run and create all of your intervals/timeouts at once, and then when the 100ms is up they’ll all be triggered more or less at once. If your intention is to gradually change the opacity with each change happening every 100ms then you need the following code (or some variation thereon):

function fadeIn(i){
    // if called with no i parameter value initialise i
    if (typeof i === "undefined") {
       i = -1;
    }

    if (++i <= 100) {
       Opacityto(document.getElementById('nav'), i);
       setTimeout(function() { fadeIn(i); }, 100);
    }
}

// kick it off:
fadeIn();

What the above does is defines fadeIn() and then calls it passing no parameter. The function checks if i is undefined and if so sets it to -1 (which is what happens if you call it without passing a parameter). Then it increments i and checks if the result is less than or equal to 100 and if so calls Opacityto() passing a reference to the element and i. Then it uses setTimeout() to call itself in 100ms time, passing the current i through. Because the setTimeout() is inside the if test, once i gets big enough the function stops setting timeouts and the whole process ends.

There are several other ways you could implement this, but that’s just the first that happened as I started typing…