我希望当页面加载时列表项慢慢地一个接一个地出现在屏幕上。这是jquery中的代码,我使用过show()
但它不起作用。我确实在这里查找问题,其中一些正在使用附加方法,但这不是我要寻找的。
html:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
jquery:
$("ul").find("li").each(function(i) {
$(this).delay(500*i).show();
});
有2个问题。
为此,首先li
元素必须隐藏,那么因为您正在使用delay()
,你需要一个版本show()
使用动画队列。
$("ul").find("li").each(function(i) {
$(this).delay(500 * i).show(0);
});
ul li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
使用类的另一种方法是
$("ul li.hidden").each(function(i) {
$(this).delay(500 * i).queue(function(nxt) {
$(this).removeClass('hidden');
nxt();
});
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="hidden">A</li>
<li class="hidden">B</li>
<li class="hidden">C</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)