0

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;
2
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by AleMonteiro
0

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.

0

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

Edited by AleMonteiro: misspelling

0

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.