.fadeIn 함수가 작동하지 않습니다.

Question

저는 jQuery를 매우 신중하게 사용하고 있습니다.

나는 단계적으로 목록을 페이드하고 싶다. 그러나 아무것도 내 기능에 문제가 있습니다. 누가 좀 도와 줄 수 있니?

고맙습니다.

편집 : 나는 모든 것을 살펴보고 실수를 발견 할 수 없습니다. 몸에는 필요한 클래스가 있습니다.

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

당신은 .fadeIn를 호출하고, 예를 들어 매개 변수로 지연 값을 전달해야 $(this).fadeIn((i++) * 500);. 여기

는 Codepen입니다 :

https://codepen.io/anon/pen/xXrNLr (나는 당신이하지 방금 지연으로 i * 500을 할 줄 경우 지연, 목록 항목에 따라 증가하려는 의도의 추정하고 있습니다).

편집 : 목록이 처음 표시로 설정되어있는 경우 :이 목록에 표시되는 항목 그래서

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

이 대안 CSS를 변경 : 없음, 당신은 당신의 if 문 내부에이 줄을 추가 할 수 없음을 나는 fadeIn()이 페이딩 전에 표시되도록 설정합니다.