javascript - .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">
	  <div class="col-lg-16">
		  <ul>
		    <li>// some content</li>
		    <li>// some content</li>
		    <li>// some content</li>
		    <li>// some content</li>
		    <li>// some content</li>
		    <li>// some content</li>
		    <li>// some content</li>
		  </ul>
	  </div>
  </div>
</div>

Answer 1

您只需调用 .fadeIn 并将延迟值作为参数传递，例如$(this).fadeIn((i++) * 500);。

这是一个代码笔:https://codepen.io/anon/pen/xXrNLr

(我假设您有意希望延迟增加每个列表项，如果不是，您只需执行 i * 500 作为延迟)。

编辑:如果您的列表最初设置为显示:无，您可以在 if 语句中添加此行:

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

或者更改 CSS，以便显示列表项:无，我相信 fadeIn() 会将它们设置为在淡入淡出之前显示。