我正在用 jquery 做一些 fadeIn 和 fadeOut。最后的淡入淡出(fadeOut())淡出整个css表格，转到css body背景图片。我已将背景位置设置为居中。 Jquery 在动画完成后将图像重置到左下角的位置。我正在寻找防止这种情况并将背景图像保持为中心。
我尝试将所有内容都放在图形包装器中而不是正文中，这就是 <figure> 的原因标签。当我尝试这样做时，动画结束后屏幕完全变白。
HTML & jquery:
<html>
<head lang="en">
<link type="text/css" rel="stylesheet" href="site.css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<meta charset="UTF-8">
<script>
$(document).ready(function() {
$(".firstFade").fadeIn(5000).delay(10000).fadeOut(7000);
$(".secondFade").delay(6000).fadeIn(5000).delay(3000).fadeOut(1000);
$("#tableCell5Text").delay(14500).fadeOut(1000);
$(".container").delay(15000).fadeOut(7000);
});
</script>
</head>
<body>
<figure id="pathImg">
<div class="container" id="table">
<div class="container containerRow" id="tableRow">
<div class="container containerCell" id="tableCell">
<img src="images/img1.jpg" alt="" width="150" height="150" class="hidden firstFade" id="img1">
</div>
</div>
<div class="container containerRow" id="tableRow2">
<div class="container containerCell" id="tableCell2">
<img src="images/img2.png" alt="" height="85" width="77" class="hidden firstFade" id="img2">
</div>
</div>
<div class="container containerRow" id="tableRow3">
<div class="container containerCell" id="tableCell3">
<p class="hidden firstFade" id="tableCell3Text">some text</p>
</div>
</div>
<div class="container containerRow" id="tableRow4">
<div class="container containerCell" id="tableCell4">
<h2 class="hidden secondFade" id="tableCell4Text">some text</h2>
</div>
</div>
<div class="container containerRow" id="containerRow5">
<div class="container containerCell" id="containerCell5">
<h1 id="tableCell5Text">some text</h1>
</div>
</div>
</div>
</figure>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#pathImg {
margin: 0;
padding: 0;
background-image: url(images/sunnySkies.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.hidden {
display: none;
}
#table {
display: table;
height: 100vh;
width: 100vw;
text-align: center;
background-color: #ffffff;
}
.containerRow {
display: table-row;
}
.containerCell {
display: table-cell;
}
#tableCell {
height: 20vh;
}
#tableCell2 {
height: 15vh;
vertical-align: middle;
}
#tableCell3 {
height: 10vh;
vertical-align: top;
}
#tableCell4 {
height: 5vh;
vertical-align: top;
}
#tableCell3Text {
font-family: 'Tangerine', cursive;
font-size: 300%;
color: #444444;
}
#tableCell4Text {
font-family: arial;
color: #444444;
}
#tableCell5Text {
font-family: arial;
color: #444444;
}
#img1 {
margin: 5vh 0 0 0;
padding: 5px;
border: 2px solid #444444;
border-radius: 5px;
background-color: gray;
}
最佳答案
实际上，在没有数字的情况下，它对我来说似乎工作正常。但是，如果您使用的是图形，那么问题是您正在淡化 .container 将其设置为 display:none ，这将消除所有高度。你需要在页面上留下一些东西，这样一切都不会崩溃。最后， body 没有高度，这就是你得到白屏的原因。所以我们要做的是获取最大图像的高度，并将 body 设置为淡出前的高度。
将你的 JQuery 改成这个
$(".firstFade").fadeIn(5000).delay(10000).fadeOut(7000);
$(".secondFade").delay(6000).fadeIn(5000).delay(3000).fadeOut(1000);
$("#tableCell5Text").delay(14500).fadeOut(1000);
var $height = $("#table").height();
$("body").height($height);
$(".container").delay(15000).fadeOut(7000);
关于jquery - 防止 jquery 在 fadeOut() 之后重置背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43080534/