我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个box有n个元素,这些元素顺序淡入,每隔2分钟,执行一次,代码开始:

  1. <div></div>
  2. <div></div>
  3. <div></div>
  4. <div></div>
  1. div{
  2. width: 100px;height: 60px;background: green;
  3. margin: 20px;float: left;display: none;
  4. }
  1. var o_div = $('div');
  2. var len = o_div.length;
  3. var count = 0;
  4. function overturn(){
  5. o_div.eq(count).fadeIn();
  6. count ++;
  7. if (count == len) {//当元素全部显示后
  8. clearInterval(s);
  9. setTimeout(function(){//过3分钟再重新执行
  10. s = setInterval(overturn,800);//每0.8秒出现一个元素
  11. },3000);
  12. }
  13. if (count > len) {
  14. count = 0;
  15. o_div.css('display','none');//当元素个数加到比元素本身个数大时,隐藏,为下一次动画做准备
  16. }
  17. }
  18. 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. kettle入门大数据管理工具

    研究 kettle 的使用 大佬博客:https://www.cnblogs.com/mq0036/p/9238646.html 国内镜像下载:http://mirror.bit.edu.cn/pen ...

  2. P1118 [USACO06FEB]数字三角形`Backward Digit Su`… (dfs)

    https://www.luogu.org/problemnew/show/P1118 看的出来是个dfs 本来打算直接从下到上一顿搜索 但是不会 看了题解才知道系数是个杨辉三角....... 这样就 ...

  3. virtualenvwrapper安装和使用

    virtualenvwrapper安装和使用步骤: 1.安装: *nix上安装的命令: pip install virtualenvwrapper windows上安装的命令: pip install ...

  4. 剑指offer-复杂链表的复制-链表-python

    题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用,否 ...

  5. Datatable 中的数据查询(查询不重复记录)

    http://blog.csdn.net/lovexiaoxiao/article/details/3734932 //在sql中我们使用distinct查询不重复记录    //然而我在项目中表关系 ...

  6. 2019 NCTF Re WP

    0x01 debug 测试文件:https://www.lanzous.com/i7kr2ta 1.Linux运行环境 在Linux上运行linux_server64文件 2.IDA配置 __int6 ...

  7. webpack收藏

    收藏链接: https://www.jianshu.com/p/8ff8e71dcbc6

  8. Android数据库使用指南(下)

    前言 上面已经说了,对表进行修改,其实就是对数据库进行升级,删除表也算升级啊,反正就是发生变化,数据库就需要升级. 所以老实说其实有个地方决定了数据库的版本 public class DBHelper ...

  9. GIT 开发流程

    1.git clone 使用 git clone 将一个项目下载到本地 2.git checkout -b branchName 新建一个branchName的本地分支 3.git add file/ ...

  10. TCP软件环境测试

    利用合宙官网上的云平台->TCP透传云,建立一个TCP服务. http://tcplab.openluat.com/ [注意事项] 如3分钟内没有客户端接入则会自动关闭. 每个服务器最大客户端连 ...