zoukankan      html  css  js  c++  java
  • 每隔2分钟,div元素顺序淡入

    我们的官网,是游戏网站,需要很多的动画效果,下面就开写一个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,不然延时不起作用。

      

  • 相关阅读:
    SDUT_1743 最优合并问题
    并查集路径压缩方法
    java定时器
    出路在哪里?出路在于思路!
    ztree学习
    sql
    java乱码问题详解值得收藏
    js 增加删除表格的行
    java DataBaseExecutor
    java增删改查
  • 原文地址:https://www.cnblogs.com/eyed/p/8423501.html
Copyright © 2011-2022 走看看