Die Funktion .fadeIn funktioniert nicht

Question

Ich bin sehr neu zu jQuery, also bitte etwas Geduld.

Ich möchte eine Liste Schritt für Schritt einblenden. Aber irgendetwas stimmt nicht mit meiner Funktion. Kann mir bitte jemand helfen?

Vielen Dank!

Edit: Ich habe einen Blick auf alles und kann keine Fehler finden. Der Körper hat die benötigte Klasse.

$(".sideThree ul").children().each(function(i) { 
 
    if ($('body').hasClass("content-three-has-open")){ 
 
    $(".sideThree ul").css('display','block'); 
 
    $(this).fadeIn((i++) * 500); 
 
    } 
 
});

.sideThree ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.sideThree ul li { 
 
    list-style-type: none; 
 
    margin-bottom: 15px; 
 
    float: left; 
 
    padding: 25px; 
 
    background: #2b2b2b; 
 
    width: 49%; 
 
    margin-right: 1%; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sideThree-content"> 
 
    <div class="row"> 
 
\t <div class="col-lg-16"> 
 
\t \t <ul> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t  <li>// some content</li> 
 
\t \t </ul> 
 
\t </div> 
 
    </div> 
 
</div>

Answer 1

Sie müssen nur .fadeIn anrufen und Ihren Verzögerungswert als Parameter übergeben, z.B. $(this).fadeIn((i++) * 500);. Hier

ist ein Codepen: https://codepen.io/anon/pen/xXrNLr

(ich bin vorausgesetzt, es Absicht ist, dass Sie die Verzögerung wollen pro Listenelement zu erhöhen, wenn nicht sie würden gerade i * 500 wie die Verzögerung tun).

Edit: Wenn die Liste zunächst auf Anzeige eingestellt ist: keine, können Sie diese Zeile in Ihrem if-Anweisung hinzu:

$(".sideThree ul").children().each(function(i) { 
    if ($('body').hasClass("content-three-has-open")){ 
    $(".sideThree ul").css('display','block'); 
    $(this).fadeIn((i++) * 500); 
    } 
}); 

Alternativ können Sie die CSS ändern, so dass es die Listenelemente ist, die Anzeige sind: keine, ich believe fadeIn() legt sie so fest, dass sie vor dem Fading angezeigt werden.