javascript - 在底层图像加载后平滑地动画背景颜色不透明度

Question

我有一个黑色背景的 div。当我的页面加载时，我会调用 image然后加载 image进入 div身后主div .然后我想平滑地淡化叠加 div具有不透明度以便显示下面的图像，但不影响叠加层中内容的不透明度 div .

我所拥有的根本不起作用:https://jsfiddle.net/n7t2xmha/3/

• 动画不流畅
• 不透明度不准确
• 文字不固定

代码:

<div class="outerdiv">
    <div class="innerdiv">
    </div>
    <p>
        content - should remain solid white
    </p>
</div>

.outerdiv {
    background-color: black;
    position: relative;
    display: block;
    height: 500px;
    width: 500px;
    color: white;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

.outerdiv-opaque {
    opacity: 0.9 !important;
}

.innerdiv {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index=-1;
}

JS

var innerDiv = $('.innerdiv');
setTimeout(function() {
    innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
    var outerdiv = $('.outerdiv');
    setTimeout(function() {
        outerdiv.addClass('outerdiv-opaque');
    }, 500);

}, 1000)

Answer 1

将超时功能分开。修改 .outerdiv-opaque 类

   .outerdiv-opaque {
      background-color: white;
    }

分离后的超时函数如下所示

    var innerDiv = $('.innerdiv');
setTimeout(function() {
  innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)

 var outerdiv = $('.outerdiv');
  setTimeout(function() {
    outerdiv.addClass('outerdiv-opaque');
  }, 500);