1

我的清晰动画有效，我的显示动画有效，但是当我尝试做一个然后另一个时，它似乎使所有编程都无效。我敢肯定有一个简单的论点，我只是没有看到。

var opac = null;

var removeGif = document.getElementById('splash');
function dissappear (elem, speed) {
    if (opac) clearTimeout(opac);
    if ( !elem.style.opacity ) {
        elem.style.opacity = 1;
    }
    setTimeout(function() {
        setInterval(function() {
        elem.style.opacity -= 1;
        }, speed / 50);
    },10);
}
dissappear(removeGif, 250000);

var folio = document.getElementById('content');
function appear (elem, speed) {
    if (opac) clearTimeout(opac);
    if ( !elem.style.opacity ) {
        elem.style.opacity = 0;
    }
    setTimeout(function() {
        setInterval(function() {
        elem.style.opacity += 1;
        }, speed / 50);
    },10);
}
appear(removeGif, 250000);

如果有人能看到问题，请告诉我。

4

2 回答 2

0

我看到一些可能有问题的事情：

  1. 你永远不会分配setTimeoutto的结果opac，所以opac永远都是null。

    opac = setTimeout(function() {
           ...
       });

  2. 在appear()中，这段代码对我来说没有意义：

    if ( !elem.style.opacity ) {
    elem.style.opacity = 0;
}

    可以elem.style.opacity为空吗？如果是这样，那没关系。!elem.style.opacity如果不透明度为 ，也将是正确的0，因此无需将其重置为 0。

    您不想检查元素是否已经可见，然后退出该功能而不是先使其不可见吗？

  3. 正如Ian所说，不透明度值的范围从 0 到 1 作为十进制值，而不是百分比值。考虑将增量和减量更改为 0.1 之类的值。

  4. 您的setInterval()函数将永远不会停止运行。你从来没有任何对应clearInterval()的 . 您也不会检查不透明度是 0 还是 1 以知道何时调用clearInterval()。

一个简单的淡入/淡出实现不需要setTimeout. 一个工作示例看起来更像这样。

于 2012-11-02T18:58:18.567 回答
0

感谢您的意见帮助我使我的代码不那么迂回。这是我最终得到的代码。

window.setTimeout(function toggle () {
    var spl = document.getElementById('splash');
    var cnt = document.getElementById('content');
        spl.style.display = "none";
        cnt.style.display = "block";
}, 25000);

现在一切似乎都那么简单！

于 2012-11-05T15:53:18.520 回答