淡入/淡出 jquery 列表
[英]Fading in/out a jquery list
问题描述
我正在尝试编写一个 jquery 函数，该函数循环遍历一个无序列表（具有 id“intro”的 ul 元素）并单独淡入和淡出每个元素。 这不起作用，但我在开发人员工具中没有发现任何错误。 我也尝试更改var list = $("#intro"); 到var list = $("#intro li"); 但也没有骰子
<script type = "text/javascript">
function startAnimations(){
var list = $("#intro");
list.hide();
list.each(function(li) {
$(li).fadeIn(3000, function(){
$(li).fadeOut(3000);
});
});
}
</script>
由于要求 html：
<body onload="startAnimations()">
<div class = "container">
<div id = "inner"> </div>
<div id = "right-col">
<ul id = "intro">
<li id = "greeting"> <h2 > sometext </h2> </li>
<li id = "sidenote"> <h6 > sometext </h6> </li>
<li id = "sentence"> <h3 > sometext </h3> </li>
<li id = "sentence"> <h3 > sometext</h3> </li>
<li id = "sentence"> <h3 > sometext</h3> </li>
</ul>
</div>
</div>
</body>
5 个解决方案
解决方案1
4 已采纳 2014-03-28 04:00:07
尝试
function startAnimations() {
$("#intro li").hide();
function loop() {
var $li = $("#intro li:first-child").fadeIn(3000, function () {
$li.fadeOut(3000, function () {
$li.appendTo('#intro');;
loop()
})
});
}
loop()
}
演示：小提琴
解决方案2
1 2014-03-28 04:03:11
您可以使用：
function fadeLi(elem) {
elem.delay().fadeIn().delay(1500).fadeOut(500, function () {
if (elem.next().length > 0) {
fadeLi(elem.next());
} else {
fadeLi(elem.siblings(':first'));
}
});
}
$(function () {
$('#intro li').hide();
fadeLi($('ul li:first'));
});
解决方案3
0 2014-03-28 03:54:00
function startAnimations(){
$("#intro").hide();
$("#intro li").each(function() {
var _this = $(this);
_this.fadeIn(3000, function(){
_this.fadeOut(3000);
});
});
}
解决方案4
0 2014-03-28 03:54:05
我认为你没有像你想要的那样选择 li。 像这样尝试：
<script type = "text/javascript">
function startAnimations(){
var list = $("#intro li");
list.hide();
list.each(function(index) {
$(this).fadeIn(3000, function(){
$(this).fadeOut(3000);
});
});
}
</script>
这个“each”函数的第一个参数不是元素本身。 它是索引
解决方案5
0 2014-03-28 04:01:53
其中大部分看起来都是不错的解决方案。 我可能正在阅读您的问题，但我假设单独淡入和淡出的优势是您可以错开过渡。
如果是这种情况，我建议使用 jQuery 的 .delay() 方法：
我已经分叉了 @arun 制作的 jsfiddle 来向您展示它是如何完成的：
function startAnimations() {
var list = $("#intro li");
list.hide();
list.each(function (i, li) {
$(li).delay(i * 500).fadeIn(3000, function () {
$(li).fadeOut(3000);
});
});
}
startAnimations();
jQuery淡入淡出不断
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.