Javascript 在一定时间后更改div的z索引

我需要一个div，以便在六秒钟后立即淡入淡出。。。（使用下面的代码，我让该部件工作）

我还需要更改div的z索引，以便在它消失后可以访问它下面的内容

我不确定改变z-index是否是最好的方法，但6秒钟后我非常希望它看起来就像div从未在第一时间消失一样，就像div的代码从未出现过一样

我该怎么做呢

<style type="text/css">
    #overlay{
        display:none;
        background:#CD2026;
        width: 508px;
        height: 649px;
        text-align: center;
        color: #ffffff;
        position:absolute;
        left:12px;
        top:0px;
        z-index:100;
    }
</style>

<script type="text/javascript">
    //<![CDATA[
    $(window).load(function(){
        $('#overlay').fadeIn('slow').delay(6000).fadeOut('slow');
    });
    //]]>
</script>

<script type="text/javascript">
    //<![CDATA[
    $("#overlay").css('z-index','100');
        setTimeout(function(){ $("#overlay").css('z-index','-100'); },6000)
    });
    //]]>
</script>

<div id="overlay" style="display: none;"></div>

#覆盖层{
显示：无；
背景：#CD2026；
宽度：508px；
高度：649px；
文本对齐：居中；
颜色：#ffffff；
位置：绝对位置；
左：12px；
顶部：0px；
z指数：100；
}
//
//

试试这个

$(window).load(function(){
    $('#overlay').fadeIn('slow').animate({opacity:0,'z-index':-100},6000);
});

---

你只要换一行就行了。在值中添加{}

setTimeout(function(){ $("#overlay").css({'z-index','-100'}); },6000)

正确答案：

  $(window).load(function(){
  $('#overlay').fadeIn('slow').delay(6000).fadeOut('slow')});

  window.setTimeout(function(){ 
      $("#overlay").css({'z-index':'-100'});
  },6000);

这很有效

请参见

您可以删除

$（document）.ready（）

当div淡出时，6秒后可单击div下的按钮

编辑

---

您不需要将

z-index

更改为

.fadeOut（）

设置

显示：无

。div不再干扰页面了

如果您希望“就像div的代码从未出现过一样”，最好将显示设置为“无”，而不是更改z索引

将淡出更改为：

.fadeOut('slow', function(){$(this).css('display', 'none')})

.fadeOut('slow', function(){$(this).css('z-index', '-100')})

否则，如果仍要更改z索引，请将淡出更改为：

.fadeOut('slow', function(){$(this).css('display', 'none')})

.fadeOut('slow', function(){$(this).css('z-index', '-100')})

---

Hey@Rohan，我试过你的代码，但它似乎无法让我访问下面的内容。。。即使在淡出之后。。。用你的代码，它不会消失，只是剪切…我已经改变了它，仍然像这样消失$（#productOverlay'）.fadeIn（'slow'）.delay（6000）.fadeOut（'slow'）.animate（{opacity:1，'z-index'：-100}）；'但是仍然没有雪茄…@JStormThaKid不要使用任何其他代码，只需使用上面我做的更改。太棒了！谢谢你的帮助，我知道是什么原因导致它不让我与它背后的元素互动。你的代码帮助了我，谢谢你抽出时间来帮助我，我很感激！当你说在值中添加{}。。。你是说。。。setTimeout（function（）{$（“#overlay”）.css（'z-index'，'-100'）；}，{6000}）@AlpeshPrajapati不，你不能在

'z-index'，'-100'

周围放置

{}

。它不是一个物体。使用

{}

的正确代码将是

.css（{'z-index'：'-100'}）

注意

：

而不是

，

尽管

设置超时（function（）{$（“#overlay”）.css（'z-index'，'-100'）；}，6000）是correct@AlpeshPrajapati-太棒了！谢谢你的帮助，我知道是什么原因导致它不让我与它背后的元素互动。你的代码帮助了我，谢谢你抽出时间来帮助我，我很感激！当你的元素淡出时，它的显示变成了无，因此它不再在页面上，不需要设置z-index来访问它后面的元素，它已经完全消失了。太棒了！谢谢你的帮助，我知道是什么原因导致它不让我与它背后的元素互动。你的代码帮助了我，谢谢你抽出时间来帮助我，我很感激@这孩子不用担心。只是补充一下，这会在淡出结束后更改z索引/显示，而不是对更改进行计时，使其与淡出的预期结束时间一致，这是我最后使用的，它可以工作<代码>$（窗口）.load（函数（）{$（'#productOverlay'）.fadeIn（'slow'）.delay（6000）.fadeOut（'slow'，函数（）{$（this）.css（'z-index'，'-100'）}）太棒了！谢谢你的帮助，我知道是什么原因导致它不让我与它背后的元素互动。你的代码帮助了我，谢谢你抽出时间来帮助我，我很感激！