Fade In Divs einer nach dem anderen auf Seite laden

Question

Ich weiß, dass diese Frage schon oft gefragt worden:

Javascript: Fade In images on page load; one after the other?

Fade in divs one after another

jQuery .fadeIn() on page load?

Aber ich habe versucht, alle der vorgeschlagenen Techniken und keiner von ihnen hat funktioniert. Ich versuche, drei Textzeilen zu erhalten (die Wörter sind in Divs eingepackt), die beim Laden der Seite nacheinander erscheinen. Hier ist, was ich habe:

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); 
    } 

    }); 

Die oben ist die JS-Technik, die in dem ersten verknüpften Artikel vorgeschlagen wurde .

JSFiddle Versuch mit der ersten Technik hier: https://jsfiddle.net/b184reyv/1/
JSFiddle Versuch mit der zweiten Technik hier: https://jsfiddle.net/b184reyv/2/
JSFiddle Versuch mit der dritten Technik hier: https://jsfiddle.net/4w7kxLxf/

Bitte helfen - Ich bin nicht sicher, was sie sonst Versuchen. Vielen Dank.

Answer 1

Oh so hier meine individuelle Antwort für das, was ich von Ihrem Problem verstehen :)

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

Answer 2

So gibt es eine Handvoll Fragen hier, dass ich versuchen würde für Dich zu dokumentieren:

1.for Schleifen in JavaScript oft Umfang ein bisschen unerwartet. Sie können here für eine großartige Erklärung von ihnen lesen. In Ihrem Beispiel würde die Verwendung von i in einem setTimeout dazu führen, dass die letzte Iteration der Schleife jedes Mal erfasst wird, da i global deklariert wird.

2. Sie ändern die Deckkraft Ihrer ausgeblendeten Elemente, aber ihr ursprünglicher Zustand ist display: none;. Ein Gegenstand mit display: none; wird niemals angezeigt, unabhängig von der Deckkraft. Verwenden Sie anstelle von display: none;opacity: 0;. Sie können auch eine transition: opacity 1s hinzufügen, damit sie statt "nur" eingeblendet werden.

3. Ihr Array ist nicht syntaktisch korrekt. Jedes Element sollte in Anführungszeichen stehen und mit einem Komma getrennt sein, während Ihr Objekt derzeit eine große Zeichenfolge mit Kommas enthält.

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

4. Sie verwenden .style auf jedes Element in der elements Array, aber sie sind einfach Strings.Zu keinem Zeitpunkt konvertieren Sie diese Zeichenfolgen in Elemente. Wenn Sie also versuchen, .style zu verwenden, wird ein Fehler ausgegeben. Sie müssen sie in einen Selektor implementieren.

Setzen Sie alle diese Informationen zusammen, suchen Sie stattdessen nach etwas wie diesem. Siehe die Kommentare im JavaScript zur Erklärung.

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