JQuery的原始Javascript淡出为背景

Question

我需要禁用背景，以便在用户点击图片时显示带有视频的小弹出窗口。

我可以用JQuery来做，但似乎无法在Javascript中理解它。

这是我在JQuery中所做的：

样式片段：

 .overlay {
    z-index: 4;
    position:absolute;
    display:none; 
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

Jquery片段：

$(".overlay").fadeToggle();

Html片段：

<div id="bck" class="overlay"></div>

在javascript中我尝试了很多东西，比如：

var el = document.getElementById("bck");
function fadeIn(el) {
    el.style.opacity = 0;
    var tick = function() {
        el.style.opacity = +el.style.opacity + 0.01;
        if (+el.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
        }
    };
    tick();
   }
   fadeIn(el);

但它不起作用

请帮忙！

Answer 1

您应该使用Jquery插件overlay.js。它会让你的生活更轻松。

http://jquerytools.github.io/documentation/overlay/

但是，如果那不是您想要的路线，我确实注意到您的代码中存在一些问题。您将超时设置为16毫秒。这太快就无法获得适当的淡入。将其调整到至少100毫秒就可以在一秒钟内完成淡入淡出。