Question

我需要一个div立即淡入并在六秒后消失...（使用下面的代码我有那部分工作）

我还需要更改div的z-index，以便在淡出时我可以访问其下的内容......

我不确定更改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>

Answer 1

试试这个，

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

Answer 2

你只需要改变这一行。在值中添加{}。

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);

这有效

Answer 3

请参阅this fiddle

如果您将代码放在HTML文件末尾$(document).ready();

之前，您可以删除</body>并将代码保留在其中

当div淡出时，div下面的按钮可在6秒后点击

修改

您无需将z-index更改为.fadeOut()设置display: none。 div不再干扰页面了

Answer 4

你可能最好不要将显示设置为无，而不是更改z-index，如果你想要它'就像div的代码从来没有...'

将您的fadeOut更改为：

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

否则，如果您仍想更改z-index，请将fadeOut更改为：

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

Here's a working fiddle

在一定时间后更改div的z-index

4 个答案:

修改