使用jQuery在页面加载中一个接一个地淡入淡出

Question

我知道这个问题已经被问过很多次了：

Javascript：页面加载时淡入图像； 一个接一个地？

淡入淡出

页面加载时的jQuery .fadeIn（）？

但是我尝试了所有建议的技术，但没有一个起作用。 我试图获取三行文本（单词包装在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

因此，在这里我将尝试为您记录一些问题：

1. JavaScript中的for循环经常会出现意外范围。 您可以在此处阅读有关它们的详细说明。 在您的示例中，在setTimeout中使用i会导致每次都获取循环的最后一次迭代，因为i是全局声明的。

2.您正在修改隐藏元素的不透明度，但是它们的原始状态为display: none; 。 有display: none;的项目display: none; 不管不透明度，将永远不会显示。 代替display: none; ，使用opacity: 0; 您还可以添加一个transition: opacity 1s使它们淡入，而不仅仅是“出现”。

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

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

4.您正在elements数组中的每个项目上使用.style ，但是它们只是字符串。 绝对不要将这些字符串转换为元素，因此尝试使用.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

哦，所以这是我对您的问题了解的自定义答案：）

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

 .word { display: none; } 

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