每隔2分钟,div元素顺序淡入
2024-08-23 02:18:42
我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个box有n个元素,这些元素顺序淡入,每隔2分钟,执行一次,代码开始:
<div></div>
<div></div>
<div></div>
<div></div>
div{
width: 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,不然延时不起作用。
最新文章
- MVP社区巡讲-云端基础架构:12月5日北京站 12月12日上海站
- 设置arc 的默认编辑器
- javaweb回顾第五篇浅谈会话
- Qt Style Sheets Examples——定制前景色和背景色
- Cassandra 技术选型的问题
- 架构设计:负载均衡层设计方案(6)——Nginx + Keepalived构建高可用的负载层
- libvirt TLS
- 这样就算会了PHP么?-5
- 【NOIP2012】旅行计划
- erlang证书加密
- vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义&;quot;”的解决办法
- vb.net WIN32API 获取listview的值
- XML反序列化遇到数字型节点值为空导致反序列化异常
- OEMCC 13.2 安装部署
- 再谈kbmMW垃圾回收
- 安装postgis,使用postgis导入shapefile的步骤总结
- POJ 3164 Command Network(最小树形图模板题+详解)
- Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试
- 【C#】Event事件的订阅和发布
- Mybatis的关联映射
热门文章
- xmake新增对Qt编译环境支持
- [Python3] 002 Python3 中常用的命名规则
- Django @csrf_exempt不能在类视图中工作(Django @csrf_exempt not working in class View)
- HNUSTOJ-1698 送外卖(TSP问题 + 状态压缩DP)
- 【React -- 9/100】 抽离顶部导航栏 - [组件复用]
- 3.css3中多个背景图片的用法
- vue编写轮播图组件
- CPM、CPC、CPA、PFP、CPS、CPL、CPR等广告术语是什么意思
- linux Apache 日志轮询
- 洛谷P1879 [USACO06NOV]玉米田Corn Fields (状态压缩DP)