google的嵌入式播放器与jquery在chrome上的fadein方法冲突

Question

我有mask元素占据了所有窗口空间并且颜色为灰色。使用jQuery的淡入方法淡化了这个元素。我也在页面上有youtube嵌入式视频。但是，在我在Chrome中打开Developers工具并选择和节点元素之前，不会渲染蒙版。它在Firefox中工作，但嵌入式视频没有阴影。 Here is jsFiddle演示问题（点击Run见证问题）和代码：

HTML

<iframe width="420" height="315" src="//www.youtube.com/embed/gLa3H19cPw4" frameborder="0" allowfullscreen></iframe>
<div id="mask"></div>

CSS

#mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    width: 1905px; 
    height: 915px;
}

的JavaScript

//Show mask
$('#mask').fadeIn(500);

Answer 1

到目前为止，我发现的唯一解决方法是使用.show()函数。