jQuery 自动淡入下一个 html 元素然后循环重新启动 [英] jQuery automatically fade in next html element then loop to restart
本文介绍了jQuery 自动淡入下一个 html 元素然后循环重新启动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有:
<a id="item<?php echo $i; ?>">...</a>
<a id="item<?php echo $i; ?>">...</a>
...
其中 $i 将是从 1 开始的当前迭代的值,并将呈现如下内容:
Where $i will be the value of the current iteration starting from 1 and will render something like:
<a id="item1">...</a>
<a id="item2">...</a>
...
我需要的是一个脚本,只保持第一个元素可见,然后在几秒钟后(比如 4-5 秒)淡出并淡入下一个.并重复这个循环直到最后一个元素.然后循环重新开始.
What I need is a script to keep visible only the first element, then after a few seconds (lets say 4-5) fade out and fade in the next one. And repeat this cycle until last element. Then loop to start it all over again.
不需要暂停"或下一个/上一个元素.
No "pause" or next/prev elements needed.
先谢谢你!
推荐答案
你可以使用这个 JS: ( http://jsfiddle.net/KWmgf/ )
You can use this JS: ( http://jsfiddle.net/KWmgf/ )
var fadeLoop = function($el) {
$el.fadeOut(4000, function() {
var $next = $el.next();
if ($next.length == 0) {
$next = $el.siblings(":first");
}
$next.fadeIn(4000, function() {
fadeLoop($next);
});
});
};
$(document).ready(function(){
$("#item1").siblings().hide();
fadeLoop($("#item1"));
});
这篇关于jQuery 自动淡入下一个 html 元素然后循环重新启动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文