0

我试图摆弄并在 JavaScript 中创建一个小淡出函数，这就是我想出的：

function fadeOut(id, time){
  var elem = document.getElementById(id);
   elem.style.opacity = 1;
   var opc = 1;
   while(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
   }
   elem.style.opacity = 0;
}

但这不会“实时”显示 div 的不透明度，而是显示最终结果，即 opacity = 0;
我在这里测试过：

fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;
fadeOut("hello",10000);
document.getElementById("hello").style.opacity = 1;

计算需要很长时间，只有当它完成时才会转储结果，
而不是无缝显示，在计算时，
我该如何解决这个问题？

4

5 回答 5

2

您需要设置计时器，因为在您的函数完成并且事件处理程序可以运行之前，UI 不会更新。

于 2012-06-02T16:16:37.000 回答
2

这是因为您没有“让出”线程以允许浏览器应用更改。

像这样使用 setTimeout(..) 代替：

function fadeOut(id, time){
   var elem = document.getElementById(id);
   if(opc >= (1/time)){
      opc -= (1/time);
      console.log(opc);
      elem.style.opacity = opc;
      setTimeout(function(){fadeOut(id,time);}, 100);
   }
   else
      elem.style.opacity = 0;
}

不是一个很好的代码，但它给了你这个想法。

也许你可以使用jQuery库。在这种情况下，您将使用fadeOut

于 2012-06-02T16:16:59.233 回答
1

导致此问题的一种可能是事件冒泡。尝试使用 event.stopPropagation() 来防止事件（如果您使用 FadeOut 函数来响应事件）冒泡。

代码是

function StopBubble(e)
{   
    if (!e)
        e = window.event;

    e.cancelBubble = true; /* Microsoft */
    if (e.stopPropagation)
        e.stopPropagation(); /* W3C */
}
于 2012-06-02T16:27:10.300 回答
0

为什么不使用像 jQuery 这样的 JavaScript 库？因为某些 JavaScript 代码与不同类型的浏览器不兼容。

在 jQuery 中，你可以使用这个：

$(".id").css("background","blue").fadeOut("slow");
于 2012-06-02T16:25:46.707 回答
0

您必须在对 DOM 进行的每次修改之间指定延迟才能看到效果。javascript 中没有添加暂停功能的选项，因此您必须依赖计时器。有两种方法可以实现这一点。最常用的方法是 setInterval(fn,sec)。但是 setInterval 不好，因为它在每个指定的时间间隔执行回调，而不管之前的执行是否完成。

我个人建议使用库而不是重新发明轮子。但是对图书馆在幕后的工作有一个基本的了解总是好的。

下面是一个示例片段，无需 setInterval 即可实现此目的。

注意：这只是为了演示。不跨浏览器兼容。扩展它以实现可重用性和跨浏览器兼容性。

<div id="mydiv"></div>

function fadeOut() {

    var _timeOut,
        _proceed = true,
        _elm = document.getElementById( "mydiv" ),
        _opacity;

    function addOpacity() {

        // _elm.style.opacity will return empty string
        // see https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
        // getComputedStyle() not cross broswer

        _opacity = +window.getComputedStyle( _elm, null ).getPropertyValue( "opacity" );
        if( _opacity > 0.1 ) {
            // a simple algorithm for basic animation
            _elm.style.opacity = _opacity / 2;
        } else {
            _elm.style.opacity = 0;
            _proceed = false;
        }
    }

    (function animate() {
        if( !_proceed ) {
            clearTimeout( _timeOut );
            return;
        }

        addOpacity();

        // unlike setInterval(), this approach waits for addOpacity() to complete before its executed again
        _timeOut = setTimeout( animate, 1000 );

    }());   

}
于 2012-08-23T11:05:42.363 回答