每隔2分钟,div元素顺序淡入
我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个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,不然延时不起作用。
每隔2分钟,div元素顺序淡入的更多相关文章
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...
- js颠倒数组元素顺序reverse()
颠倒数组元素顺序reverse() reverse() 方法用于颠倒数组中元素的顺序. 语法: arrayObject.reverse() 注意:该方法会改变原来的数组,而不会创建新的数组. 定义数组 ...
- YTU 2987: 调整表中元素顺序(线性表)
2987: 调整表中元素顺序(线性表) 时间限制: 1 Sec 内存限制: 2 MB 提交: 1 解决: 1 题目描述 若一个线性表L采用顺序存储结构存储,其中所有元素都为整数.设计一个算法,将所 ...
- jquery控制元素的淡入淡出切换
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 使 div 元素看上去像一个按钮
使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- js动态删除div元素
在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- Java实验报告(一)
1.水仙花数 public class test1{ public static void main(String[] args){ for(int num=100;num<1000;num++ ...
- 递归 dfs 记忆化搜索 动态规划
今天做洛谷P1434 [SHOI2002]滑雪 的时候仔细想了想记忆化搜索 现在总结一下 为了描述问题的某一状态,必须用到该状态的上一状态,而描述上一状态,又必须用到上一状态的上一状态……这种用自已来 ...
- JSP技术学习总结
1.JSP的执行过程 首先用户向服务器发出请求,服务器在接收请求后去寻找响应的jsp页面,然后服务器将jsp页面翻译成.java文件,然后进行编译得到.class字节码文件,服务器执行class文件将 ...
- P1141零一迷宫
这是一道对于除了我之外其他人都十分简单的搜索题,我终于在这个夜里搞会了. 首先其问可以到达多少个点,并不是走一次可以最多经过几个点,这就解释了为什么不需要回溯,并且递归边界则是让其全部走完即可.于是便 ...
- Python 流程控制 超全解析(不可错过)
流程控制 程序执行结构流程 计算机程序在解决某个具体问题时,包括三种情形,即顺序执行所有的语句.选择执行部分的语句和循环执行部分语句,这正好对应着程序设计中的三种程序执行结构流程:顺序结构.选择结构和 ...
- Linux部署项目 shell脚本启动 及 Centos7开放指定端口
我们首先要在linux上安装好jdk tomcat mysql 这些基本环境,这些可以在楼主的 Linux入门 里面找到. linux部署spring项目 1. 右击项目,maven ...
- MySql+EF+CodeFirst
ef+mssql详细是许多.net程序员的标配.作为一个程序员当然不能只会mssql这一个数据库,今天简单聊聊ef+mysql.推荐新人阅读. 1]首先创建一个mvc项目,如图: 创建完毕之后再nug ...
- ASP.NET服务器控件Menu
http://www.cnblogs.com/huc87/archive/2009/04/05/1429831.html ASP.NET服务器控件Menu 1. ASP.NET 服务器控件 ...
- 【问题解决方案】Linux中命令useradd与adduser的区别
参考链接: useradd与adduser的区别 useradd与adduser:创建新的用户 CentOs: useradd与adduser是没有区别的 都是在创建用户,在home下自动创建目录,没 ...
- 使用阿里ARouter路由实现组件化(模块化)开发流程
Android平台中对页面.服务提供路由功能的中间件,我的目标是 —— 简单且够用. 这是阿里对Arouter的定位,那么我们一起来梳理一下Arouter使用流程,和使用中我所遇到的一些问题! 先来看 ...