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