Question

所以我有两个重叠的div，由我的CSS设置，如下所示。

HTML：

    <body onLoad="present();">
    <div class="pre-wrap">
        <img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
    </div>

    <div class="wrap">
        <p>Test</p>
    </div>
    </body>

CSS：

.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}

.wrap { 
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}

我希望，当主体加载时，加载一个函数，执行以下操作：淡化div .pre-wrap中的图像，在显示它几秒后，它会淡出图像并且div .pre-wrap会将其可见性设置为隐藏。然后第二个div .wrap将淡入其所有内容。

我尝试了一些简单的JS，但没有实现我的目标。

我要说的这个问题是独特的，因为它有重叠的div，需要改变可见性。请注意重叠已经有效，它只是需要做的javascript淡化。

我尝试了以下JS，它非常简单，适用于我已完成的其他项目，但它并不适用于此项目。

function present() {
        $("#logo").fadeIn(3000);
    }

Answer 1

这是我的代码。我删除了css中的属性可见性。并将#logo的显示设置为none。不再需要正文中的属性onload。

＆＃13;

var fadeTime = 3000;    // Time for fading
var waitingTime = 5000; // Time how long image is visible



$(window).ready(function(){
	$("#logo").fadeIn(fadeTime);
  
  setTimeout(function(){
  	$(".pre-wrap").fadeOut(fadeTime);
    $(".wrap").delay(fadeTime).fadeIn(fadeTime);
  },fadeTime+waitingTime);
  
});

＆＃13;

.pre-wrap, .wrap{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 700px;
  width: 900px;
  opacity: 1.0;
  margin: auto;
}

.pre-wrap {
  background-color: red;
}

.wrap { 
  background-color: black;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="pre-wrap">
  <img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>

<div class="wrap">
  <p>Test</p>
</div>

＆＃13;

具有重叠的过渡

1 个答案: