Question

var fade = 1;

function fadeit() {
    if (fade < 4500) 
        fade++
    else 
        fade = 1
    setTimeout("fadeit()", 100)
}

function fader() {
    fadeit()
    if (fade < 3500) 
        document.getElementById("showone").style.opacity = "0.4";
    else if (fade < 500) 
        document.getElementById("showone").style.opacity = "0.1";
    else 
        document.getElementById("showone").style.opacity = "1.0";
}

I am trying to get this code to work so that it will fade the image at different times.

Answer 1

You need to actually do the fading on each call to fadeit. All you’re doing is running up the count. Also, the logic of your if...else if...else was wrong. The first condition will always be true whenever the second condition is true, so the second branch will never be taken. I’ve rewritten it here:

var fade = 1;

function fadeit() {
    if (fade < 4500) {
        fade++
    } else {
        fade = 1
    }
    doFade();
    setTimeout(fadeit, 100)
}

function fader() {
    fadeit()
}

function doFade() {
    if (fade < 500) 
        document.getElementById("showone").style.opacity = "0.1";
    else if (fade < 3500) 
        document.getElementById("showone").style.opacity = "0.4";
    else 
        document.getElementById("showone").style.opacity = "1.0";
}

Note that this will continuously cycle through the fade-in (which is what your original code was trying to do). If you want to fade-in once and be done with it, you could rewrite it as:

var fade = 1;

function fadeit() {
    if (fade < 4500) {
        fade++
        doFade();
        setTimeout(fadeit, 100)
    }
}

function fader() {
    fade = 1;
    fadeit()
}