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

这是一个Codepen：https://codepen.io/anon/pen/xXrNLr

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

编辑：如果您的列表最初设置为display：none，则可以在if语句中添加此行：

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

或者更改CSS以便它显示的列表项：none，我相信fadeIn（）会将它们设置为在淡入淡出之前显示。

.fadeIn函数不起作用

1 个答案: