Question

我知道这个问题之前已被多次询问过：

但我已经尝试了所有建议的技术，但没有一个能够奏效。我正在尝试获取三行文本（单词包含在div中），在页面加载时一个接一个地出现。这就是我所拥有的：

HTML：

<div class="row"><!--second row-->
<div class="col-lg-12 center">
    <div id="tagline-wrapper">
        <div class="center-text hidden1">Responsive</div>
        <div class="between-lines">
            <div class="line"></div>
            <div class="clean hidden2">Clean</div>
            <div class="line"></div>
        </div>
        <div class="center-text hidden3">Powerful</div>
    </div>
</div>
</div><!--end row-->

CSS：

.center {
 text-align: center;
 display: flex;
 color: #ffffff;
 font-family: 'proxima_nova_ltsemibold';
 text-transform: uppercase;
 font-size: 52px;
}

#tagline-wrapper {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
}

.center-text {
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}

.between-lines {
display: flex;
align-items: center;
}

.line {
border-bottom: 2px solid #ffffff;
display: block;
flex-grow: 1;
height: 0;
}

.clean {
padding: 0 1.5rem;
text-align: center;
font-family: 'proxima_nova_ltsemibold';
font-size: 52px;
text-transform: uppercase;
color: #ffffff;
}

/*hide elements initially*/

.hidden1 {
display: none;
}

.hidden2 {
display: none;
}

.hidden3 {
display: none;
}

的JavaScript

 $(document).ready(function(){
 var elements = [ 'hidden1, hidden2, hidden3' ];

  for (var i = 0; i < elements.length; i++) {
  setTimeout(function() {
      elements[i].style.opacity = 1;
      }, 1250 * i);
  }

  });

以上是第一篇链接文章中提出的JS技术。

JSFiddle尝试使用第一种技术：https://jsfiddle.net/b184reyv/1/
JSFiddle尝试使用第二种技术：https://jsfiddle.net/b184reyv/2/
JSFiddle尝试使用第三种技术：https://jsfiddle.net/4w7kxLxf/

谢谢。

Answer 1

所以这里有一些问题我会尝试为你记录：

JavaScript中的

1。 for循环通常会出现意外情况。您可以阅读here以获得对它们的详细解释。在您的示例中，在setTimeout中使用i将导致每次抓取循环的最后一次迭代，因为i是全局声明的。

2。您正在修改隐藏元素的不透明度，但其原始状态为display: none;。无论不透明度如何，都不会显示display: none;的项目。使用display: none;代替opacity: 0;，您还可以添加transition: opacity 1s以使其淡入而不仅仅是“显示”。

3. 您的数组在语法上不正确。每个项目应在引号内并用逗号分隔，而你的当前是一个带逗号的大字符串。

var elements = ['hidden1', 'hidden2', 'hidden3'];

4。您在.style数组中的每个项目上使用elements，但它们只是字符串。在任何时候你都不能将这些字符串转换为元素，因此尝试使用.style会引发错误。您需要将它们实现到选择器中。

将所有这些信息放在一起，您可能正在寻找类似的东西。 请参阅JavaScript中的注释以获取解释。

var elements = ['hidden1', 'hidden2', 'hidden3'];

for (let i = 0; i < elements.length; i++) {
  var thisElement = $("." + elements[i]); //Get the current element based on class
  fadeInElement(thisElement, i);          //Call our "Fade in" function
}

function fadeInElement(elem, time) {      //Fade-in function that takes the element to fade-in, and the time it should wait
  setTimeout(function() {
    elem.css("opacity", "1");             //Set our element's opacity to 1
  }, 1250 * time);                        //Set the time it should wait
}

body {
  background-color: black;
}

.center {
  text-align: center;
  display: flex;
  color: #ffffff;
  font-family: 'proxima_nova_ltsemibold';
  text-transform: uppercase;
  font-size: 52px;
}

#tagline-wrapper {
  margin-top: 150px;
  margin-left: auto;
  margin-right: auto;
}

.center-text {
  text-align: center;
  font-family: 'proxima_nova_ltsemibold';
  font-size: 52px;
  text-transform: uppercase;
  color: #ffffff;
}

.between-lines {
  display: flex;
  align-items: center;
}

.line {
  border-bottom: 2px solid #ffffff;
  display: block;
  flex-grow: 1;
  height: 0;
}

.clean {
  padding: 0 1.5rem;
  text-align: center;
  font-family: 'proxima_nova_ltsemibold';
  font-size: 52px;
  text-transform: uppercase;
  color: #ffffff;
}


/*hide elements initially*/

.hidden1, .hidden2, .hidden3 {
  opacity: 0;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <!--second row-->
  <div class="col-lg-12 center">
    <div id="tagline-wrapper">
      <div class="center-text hidden1">Responsive</div>
      <div class="between-lines">
        <div class="line"></div>
        <div class="clean hidden2">Clean</div>
        <div class="line"></div>
      </div>
      <div class="center-text hidden3">Powerful</div>
    </div>
  </div>
</div>
<!--end row-->

Answer 2

哦，所以我的定制答案是我对你的问题的理解：）

＆＃13;

$(window).load(function() {
  var $word1 = $(".word1");
  var $word2 = $(".word2");
  var $word3 = $(".word3");

  $word1.fadeIn(1000, function() {
    $word2.fadeIn(1000, function() {
      $word3.fadeIn(1000);
    });
  });
});

＆＃13;

.word {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="word word1">
  this
</div>

<div class="word word2">
  is
</div>

<div class="word word3">
  working
</div>

＆＃13;

使用jQuery在页面加载中逐个淡出Div

2 个答案: