Hello all! I'd like some help with some code to fade in and out banner images on my website. Basically, the idea is that every 10 seconds, the image will fade out as another image fades in. The way I am trying to accomplish this is by changing the opacity values of the two images. My problem is in the "fade" function. elem1 begins at opacity:1, whereas elem2 begins at opacity:0. When I decrement elem1.style.opacity, everything works just fine, but when I try to increment elem2.style.opacity, it successfully increments it the first time "step" is called, but then the opacity remains at .025 and won't increment any further. Does anyone have any ideas as to why this is? Thank you for your help.

var currentCount = 1;
var imageCount = 3;
var interval = .025;

function changeImage() {
    var string = "b" + currentCount;
    currentCount++;
    if(currentCount > imageCount) {
        currentCount = 1;
    }
    var newString = "b" + currentCount;
    fadeOpacity(string, newString);
}

function fadeOpacity(string1, string2) {
    var elem1 = document.getElementById(string1);
    var elem2 = document.getElementById(string2);
    fade(elem1, elem2);
}

function fade(elem1, elem2) {
    step(elem1, elem2);
    if(elem1.style.opacity > 0) {
        window.setTimeout(fade(elem1, elem2), 25);
    }
}

function step(elem1, elem2) {
    elem2.style.opacity += interval;
    elem1.style.opacity -= interval; 
}

function init() {
    document.getElementById("b1").style.opacity=1.0;
    document.getElementById("b2").style.opacity=0.0;
    document.getElementById("b3").style.opacity=0.0;
    window.setInterval(changeImage, 10000);
}
window.onload=init;

Just an idea for you to test:

elem2.style.opacity = parseFloat(elem2.style.opacity) + interval;

Just an idea for you to test:

elem2.style.opacity = parseFloat(elem2.style.opacity) + interval;

That worked. I wonder what was causing my problems. I'm still not getting the functionality I'm trying to get, but at least you answered my question. Thanks for your help.

You'r welcome!

About your fade problem, did you give a try at JQuery?

It has a pretty helpfulls effect methods:

$("#id2").fadeIn("normal");
$("#id1").fadeOut("normal");

It should do the trick.

http://jquery.com

You'r welcome!

About your fade problem, did you give a try at JQuery?

It has a pretty helpfulls effect methods:

$("#id2").fadeIn("normal");
$("#id1").fadeOut("normal");

It should do the trick.

http://jquery.com

I might take a look at JQuery. I'm still trying to learn Javascript, so adding another language right now might just be confusing. I was hoping to just javascript, but I'll consider it. Thanks.

I understand, but JQuery in fact is not another language, it's just a javascript library so you can write less code.

But if you'll stick with pure javascript, tell me what is happening with your solution and maybe i can help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.