0

我正在制作一个网站，该网站的内容消失并重新出现。因此，当用户单击某个按钮时，<div>相对于单击的图标， 的内容会淡出并淡入内容。

第一次单击该功能时，getabout它可以正常工作，但是每当我单击clear()然后再次单击时，getabout它就会开始闪烁。我发现它对cleandiv 有作用，但碰巧内容从无到有再次出现并变得断断续续。

这是我的 JavaScript 代码，它已被注释，因此您可以在这里帮帮我：

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;
}

我不明白代码的错误是什么。使用该clear()功能，它应该平滑地淡出内容然后清理它。但它只是清理 div。下次我使用getabout()函数时，它不会像第一次那样平滑淡入，而是开始闪烁。

我对网络编程比较陌生，我现在拒绝 JQuery。在使用 JQuery 之前，我想深入了解 javascript，这就是为什么我只想了解纯 JavaScript 解决方案和对此的考虑。

4

1 回答 1

1

我已经设法取消我的评论，所以再试一次！

我认为您的问题是您没有正确清除 setInterval - 确保您使用 listener = setInterval(...)

就目前而言，您的 clearInterval(listener); 由于未定义“侦听器”，因此什么也不做。所以你的淡出功能继续运行。

于 2013-09-23T19:45:27.220 回答