0

我需要一个 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>
4

4 回答 4

0

如果您希望它“就像 div 的代码从未存在...”，您最好将显示设置为 none 而不是更改 z-index

将您的淡出更改为：

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

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

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

这是一个工作小提琴

于 2013-05-24T05:20:26.717 回答
0

你只需要改变这条线。在值中添加 {}。

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

这有效

于 2013-05-24T05:14:01.763 回答
0

看到这个小提琴

$(document).ready();如果您将其放在 HTML 文件的末尾之前，您可以删除并保留其中的代码</body>

div下的按钮在div淡出6秒后可点击

编辑

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

于 2013-05-24T05:14:19.350 回答
0

尝试这个，

$(window).load(function(){
    $('#overlay').fadeIn('slow').animate({opacity:0,'z-index':-100},6000);
});
于 2013-05-24T04:51:56.093 回答