javascript, div мигает вместо исчезновения

Я создаю сайт с областью, в которой содержимое исчезает и снова появляется. Поэтому, когда пользователь нажимает на определенную кнопку, содержимое <div> исчезает и исчезает в содержимом относительно щелкнутого значка.

В первый раз функция getabout нажата, она работает нормально, но всякий раз, когда я нажимаю на clear() а затем снова на getabout он начинает мигать. Я обнаружил, что он clean к div, но бывает, что контент снова появляется из ничего и становится прерывистым.

Вот мой код JavaScript, он прокомментировал так, что вы могли бы дать мне руку здесь:

var check = null; //this will be checking the instance of div 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 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 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;
}

Я не понимаю, что такое ошибка кода. с функцией clear() он должен плавно исчезать содержимое, а затем очищать его. Но он просто очищает div. И в следующий раз я буду использовать getabout(), вместо того, чтобы плавно исчезать снова, как это происходит в первый раз, она начинает мигать.

Я относительно новичок в веб-программировании, и сейчас я отказываюсь от JQuery. Я хочу глубоко понять javascript перед тем, как перейти к JQuery, и именно поэтому я просто хотел бы узнать о чистых решениях JavaScript и соображениях об этом.