我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个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元素顺序淡入的更多相关文章

  1. Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  2. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  3. js颠倒数组元素顺序reverse()

    颠倒数组元素顺序reverse() reverse() 方法用于颠倒数组中元素的顺序. 语法: arrayObject.reverse() 注意:该方法会改变原来的数组,而不会创建新的数组. 定义数组 ...

  4. YTU 2987: 调整表中元素顺序(线性表)

    2987: 调整表中元素顺序(线性表) 时间限制: 1 Sec  内存限制: 2 MB 提交: 1  解决: 1 题目描述 若一个线性表L采用顺序存储结构存储,其中所有元素都为整数.设计一个算法,将所 ...

  5. jquery控制元素的淡入淡出切换

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  7. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  8. js动态删除div元素

    在做用户查找时 由于要把查找的结果动态载入和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态载入和显示.所以考虑到用js来搞 ...

  9. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Go语言入门篇-基本数据类型

    一.程序实体与关键字 任何Go语言源码文件都由若干个程序实体组成的.在Go语言中,变量.常量.函数.结构体和接口被统称为“程序实体”,而它们的名字被统称为“标识符”. 标识符可以是任何Unicode编 ...

  2. windows下安装mysql8并修改密码

    MySQL下载地址:http://dev.mysql.com/downloads/mysql/ Windows下安装MySQL 我下的是最新版的MySQL,解压后,目录如下: 1.进入dos的命令行, ...

  3. 通过Spark Streaming处理交易数据

    Apache Spark 是加州大学伯克利分校的 AMPLabs 开发的开源分布式轻量级通用计算框架. 由于 Spark 基于内存设计,使得它拥有比 Hadoop 更高的性能(极端情况下可以达到 10 ...

  4. 教你在 IntelliJ IDEA 中使用 VIM!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 IdeaVim(下载)插件可以让你在IntelliJ IDEA中键盘敲的飞起. 安装 打开IDEA的设置,在Plugins里 ...

  5. 由于;引发的Oracle的BadSqlExecption

    一.在使用单引号进行各种转换合并的时候发生的异常: 1:首先单引号的表示符为 ' 在Oracle中如果SQL语句带上了分号是会报错的, 在SQL传入进行执行的时候会报BadSQLExecption,这 ...

  6. [多校联考2019(Round 5 T1)] [ATCoder3912]Xor Tree(状压dp)

    [多校联考2019(Round 5)] [ATCoder3912]Xor Tree(状压dp) 题面 给出一棵n个点的树,每条边有边权v,每次操作选中两个点,将这两个点之间的路径上的边权全部异或某个值 ...

  7. 剑指offer-对称二叉树-树-python

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的.   # -*- coding:utf-8 -*- # class TreeNo ...

  8. Excel如何通过关键字模糊匹配查找全称

    打开excel,以其素材为例,通过关键字模糊匹配查找全称.   在公司名下输入公式:=LOOKUP(1,0/FIND(D2,A2:A5),A2:A5),按回车键确定即可.   FIND(D2,A2:A ...

  9. HTML DOM中的comfirm()确认对话框

    前言 最近在开发中有一个需求大概就是说:表单点击提交按钮首先弹出确认对话框,然后点击确定请求接口,那么问题来了,我们如何确定点击的是确定还是取消呢? 定义和用法 定义 comfirm()确认对话框,用 ...

  10. DEV控件的分页控件,实现勾选复选框

    /// <summary> /// 单元格的点击事件 /// </summary> /// <param name="sender"></ ...