javascript, div blinking instead of fading

Question

I'm making a site that has an area that it's content disappear and re-appears. So when the user clicks certain button, the <div>'s content fades out and fades in the content relative to the clicked icon.

First time the function getabout is clicked it works OK, but whenever I click on clear() and then again on getabout it starts blinking. I've discovered that it does the clean to the div but it happens that the content re-appears again from nothing and becomes intermittent.

Here is my JavaScript code, it's commented so you could give me a hand here:

var check = null; //this will be checking the instance of div's content
const wait_time = 50; //the time it will take to fade

function getabout(id) {
    /*  prevent second call to the same function to bug */
    if (check == id) return;
    var titleOpacity = 0,
        textOpacity = 0;
    /*  this changes the title first    */
    document.getElementById("title").style.opacity = 0;
    document.getElementById("title").innerHTML = "this is the title";
    // recursive call to the opacity changer, it 
    // increases opacity by 0.1 each time until it's 1
    setInterval(function () {
        titleOpacity = fadeIn(titleOpacity, 'title');
    }, wait_time);
    /*  changes the content next to the title   */
    window.setTimeout(function () {
        document.getElementById("dialog").style.opacity = 0;
        document.getElementById("dialog").innerHTML = "this is the content";
        setInterval(function () {
            textOpacity = fadeIn(textOpacity, 'dialog');
        }, wait_time);
    }, 500);
    check = id; // defines the instance "about" at the moment
}

function fadeIn(opacity, id) {
    opacity += 0.1;
    document.getElementById(id).style.opacity = opacity;
    document.getElementById(id).style.MozOpacity = opacity;
    if (opacity >= 1.0) clearInterval(listener);
    return opacity;
}

function clear() {
    var opacity = document.getElementById("title").style.opacity;
    // supposed to decrease the opacity by 0.1 but it's not doing that
    setInterval(function () {
        opacity = fadeout(opacity);
    }, wait_time);
    //cleans the title and dialog to fill with the next button user clicked
    document.getElementById("title").innerHTML = "";
    document.getElementById("dialog").innerHTML = "";
}

function fadeout(opacity) {
    opacity -= 0.1;
    document.getElementById("title").style.opacity = opacity;
    document.getElementById("dialog").style.MozOpacity = opacity;
    if (opacity <= 0.0) clearInterval(listener);
    return opacity;
}

function getregister(id) {
    if (check == id) return;
    clear(); // proceed to fade out the content and clean it
    check = id;
}

I don't understand what is the error of the code. with the clear() function it should smoothly fade out the content and then clean it. But it just cleans the div. And next time I use getabout() function, instead of smoothly fade in again as it does the first time, it starts to blink.

I'm relatively new to web programming and I refuse JQuery for now. I want to understand deeply javascript before go to JQuery and this is why I would just like to know pure JavaScript solutions and considerations about this.

It's because in getabout() you keep setting textOpacity to 0. So it's going from 0, to 0.1, and then back to 0. textOpacity I think is in a different scope inside of the setInterval function() — redconservatory, Sep 23 '13 at 19:31
Your clearInterval call needs a reference - you have 'listener' in your code but you aren't setting that variable up to reference your timer. I.e. listener = setInterval(... — WindsorAndy, Sep 23 '13 at 19:32
if you would like to have css3 solution than you can refer my answer [here](http://stackoverflow.com/a/16344389/1542290) — Mr. Alien, Sep 23 '13 at 19:34
Sir, "listener" means that is the respective function call that is refered. — Telmo Vaz, Sep 23 '13 at 19:36
@redconservatory , I don't see how can that part of the code produce that behavior. I'm making a recursive loop to fadeIn that ends when Opacity is grater or equals to 1.0. Perhaps I didn't understand what you meant. Maybe you could elucidate me a little more by being more specific. But I'll be looking to check the code. It's just I'm not getting the logic that why it reproduces that since I made it an end. Thank you in advance — Telmo Vaz, Sep 23 '13 at 19:47

score 1 · Accepted Answer · answered Sep 23 '13 at 19:45

1

Ive managed to cock up my comment so trying again!

I think your problem is that you're not clearing the setInterval correctly - ensure you use listener = setInterval(...)

As it stands your clearInterval(listener); is doing nothing as 'listener' is not defined. So your fade out function continues to run.

answered Sep 23 '13 at 19:45

WindsorAndy

237
1
11

But I've tested putting an Alert there from each +0.5 and it just goes two times (when it gets to 0.5 and to 1.0, I presume). Are you sure that that is the problem? Because listener, as fas as I know, refers to the "this" function. But I could be wrong. – Telmo Vaz Sep 23 '13 at 19:50
1

no 'listener' is not a reserved word.. There could be other errors in there btw I've not had a chance to run the code. Also note that style.opacity=xx in IE terms only works from version 9 onwards but I suspect that's not too much of a concern at the moment! – WindsorAndy Sep 23 '13 at 20:14
1

Thinking about it, you'd probably be better off with a setTimeout in this case - that way it just fires the once and then you can reset it to fire again if the element's opacity hasn't reached 1 (or 0) yet. That way you avoid having to set/clearInterval eg in your fadeIn function, close it with: if (opacity < 1) { setTimeout(..);} – WindsorAndy Sep 23 '13 at 20:24
You are right. I was misunderstanding the point. When I passed trough that documentation I should be very tired and understood that not the way it was supposed to. Thank you very much for your patience and I'm very grateful for your knowhow. Thanks a lot! – Telmo Vaz Sep 23 '13 at 20:33

javascript, div blinking instead of fading

1 Answers1