jQuery动画，串行动画效果代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery动画，串行动画效果代码</title>
        <style>
            * { margin: 0; padding: 0; }
            body { font: 12px/1.5 arail; }
            ul { list-style: none; }
            button { height: 2em; font-size: 14px; width: 4em; background: orange; color: #fff; border-radius: 3px; cursor: pointer; margin-bottom: 10px; border: 1px solid #eee;}
            .box { position: absolute; border: 1px solid orange; height: 40px; line-height: 40px; width: 160px; background: #eee; text-align: center; }
            .box2 { top: 120px; }
            .box3 { top: 200px; }
            .box4 { top: 280px; }
        </style>
    </head>
    <body>
        <button>go</button>
        <div class="test">
            <div class="box1 box"><h1>lalalalalla</h1></div>
            <div class="box2 box"><h1>hahahahahha</h1></div>
            <div class="box3 box"><h1>xixixixixixi</h1></div>
            <div class="box4 box"><h1>dididididdid</h1></div>
        </div>
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var clickCount=1;
                var boxLength=$('.test>div').length;
                var boxNumber=clickCount%boxLength;
                $('button').on('click',function(){
                    while($('.box'+boxNumber).queue('fx').length){
                        return;
                    }
                    clickCount++;
                    $('.box'+boxNumber).animate({
                        left:'+=100px'
                    },300,function(){
                        $('.box'+boxNumber).siblings().animate({
                            left:'+=100px'
                        },function(){
                            boxNumber=clickCount%boxLength;
                            if(!boxNumber){
                                boxNumber=boxLength;
                                clickCount=0;
                            }
                        });
                    });  
                });
            });
        </script>
    </body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery动画，串行动画效果代码

分类

jQuery实例

描述

jQuery串行动画效果代码，当你快速点击go时，就会出现盒子移动距离的差异。但是，这并非程序所期望的结果。怎么解决呢？我需要动画执行完毕，go按钮最近的一次点击才有效（不是禁止掉go按钮）。