Question

我已将代码包含在代码段中。您会注意到div text首先消失。然后是text-button div，由logo-red-div完成。每当logo-red-div淡入时，它就会向下移动text div。为什么推动这个div下降？我希望这些过渡是平滑的，而不是被推下来的东西。

感谢您的帮助。

＆＃13;

$(function textdelays() {
  $('#logo-red-div').delay(2500).fadeIn(1200);
  $('#text').delay(300).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({
    'top': '60%'
  }, 1000);
});

＆＃13;

.red {
	background-color: #ba5a45;
	width: 100%;
	height: 900px;
}
#logo-red-div {
  color: #FFF;
  font-size: 3em;
  text-align: center;
  top: 20%;
  position: relative;
  display: none;
}

#text {
  color: #FFF;
  display: none;
  text-align: center;
  position: relative;
  margin: 0 25%;
  top: 45%;
  font-size: 2.3em;
}

#text-button {
  position: relative;
  wdith: 100%;
  text-align: center;
  top: 80%;
  display: none;
  cursor: pointer;
}

.border-span {
  border: 2px solid #FFF;
  padding: 15px 10px;
  color: #FFF;
  font-weight: bold;
}

.border-span:hover {
  background-color: #FFF;
  color: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">
  <div id="logo-red-div">Optimum Designs</div>
  <div id="text">We build beautiful, engaging sites and apps for companies both large and small.</div>
  <div id="text-button"><span class="border-span">More About Us</span></div>
</div>

＆＃13;

Answer 1

您看到元素向下移动的原因是因为#logo-red-div元素最初隐藏了display: none，然后显示（从而推动其他元素向下，因为display是不再设置为none）。

要解决此问题，请将display: none替换为opacity: 0，以便考虑元素的高度，然后将.fadeIn()方法与.fadeTo() method交换以转换不透明度从0到1。

变化：

$('#logo-red-div').delay(2500).fadeIn(1200);

为：

$('#logo-red-div').delay(2500).fadeTo(1200, 1);

更新了代码段：

$(function textdelays() {
  $('#logo-red-div').delay(2500).fadeTo(1200, 1);
  $('#text').delay(300).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({
    'top': '60%'
  }, 1000);
});

#text,#text-button{position:relative;text-align:center;display:none}.red{background-color:#ba5a45;width:100%;height:900px}#logo-red-div{color:#FFF;font-size:3em;text-align:center;top:20%;position:relative;opacity:0}#text{color:#FFF;margin:0 25%;top:45%;font-size:2.3em}#text-button{wdith:100%;top:80%;cursor:pointer}.border-span{border:2px solid #FFF;padding:15px 10px;color:#FFF;font-weight:700}.border-span:hover{background-color:#FFF;color:#000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">
  <div id="logo-red-div">Optimum Designs</div>
  <div id="text">We build beautiful, engaging sites and apps for companies both large and small.</div>
  <div id="text-button"><span class="border-span">More About Us</span>
  </div>
</div>

一旦另一个div出现fadeIn（），Div就会被推下

1 个答案: