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.

Answer 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.