我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个box有n个元素,这些元素顺序淡入,每隔2分钟,执行一次,代码开始:
<div></div> <div></div> <div></div> <div></div>
div{ 100px;height: 60px;background: green; margin: 20px;float: left;display: none; }
var o_div = $('div'); var len = o_div.length; var count = 0; function overturn(){ o_div.eq(count).fadeIn(); count ++; if (count == len) {//当元素全部显示后 clearInterval(s); setTimeout(function(){//过3分钟再重新执行 s = setInterval(overturn,800);//每0.8秒出现一个元素 },3000); } if (count > len) { count = 0; o_div.css('display','none');//当元素个数加到比元素本身个数大时,隐藏,为下一次动画做准备 } } var s = setInterval(overturn,800);
好,这样,就实现了。
这里我要在说一点,时间延迟除了上面用到的setTimeout()之外,还有一个方法,是 .delay(time).hide(0),.delay函数是jquery 1.4.2新增的函数,.hide函数里必须放一个0,不然延时不起作用。