清除飞溅动画javascript返回未定义

Question

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

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

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

Answer 1

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

1. 您永远不会将setTimeout 的结果分配给opac，因此opac 将始终为null。

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

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

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

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

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

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

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

一个简单的淡入/淡出实现不需要setTimeout。一个工作示例looks more like this。

Answer 2

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

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

现在一切看起来都那么简单！