切换风格

后盾网PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 154|回复: 6

[web前端] delay和stop冲突

[复制链接]
     
  • TA的每日心情
    难过
    2017-1-8 00:23
  • 签到天数: 143 天

    [LV.7]常住居民III

    22

    主题

    420

    帖子

    3万

    积分

    硕士

    梦~魔

    Rank: 7Rank: 7Rank: 7

    积分
    32495
    活动推广币
    0 个
    后盾币
    32495 个
    注册时间
    2013-10-31
    在线时间
    109 小时
    帖子
    420
    发表于 2016-7-1 11:22:15 | 显示全部楼层 |阅读模式
    用jq做了一个效果。就是当点击某个元素的时候。其他元素就会运动。但一起运动不好看。就加了delay。想他们依次执行动画。但如果点击多次的话。运动会叠加。所以就加了stop 。但好像他和delay冲突了。元素没有运动过程。直接就跳结果了。这怎么解决
    胜利女神在睡觉!
         
  • TA的每日心情
    开心
    5 小时前
  • 签到天数: 2015 天

    [LV.Master]伴坛终老

    5013

    主题

    2万

    帖子

    244万

    积分

    管理员

    ★后盾老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2443817
    活动推广币
    12685 个
    后盾币
    2443817 个
    注册时间
    2011-5-5
    在线时间
    7397 小时
    帖子
    21710

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2016-7-1 13:43:25 | 显示全部楼层
    把代码打包发来上一份把,点击多次的解决方法很多的。
         
  • TA的每日心情
    难过
    2017-1-8 00:23
  • 签到天数: 143 天

    [LV.7]常住居民III

    22

    主题

    420

    帖子

    3万

    积分

    硕士

    梦~魔

    Rank: 7Rank: 7Rank: 7

    积分
    32495
    活动推广币
    0 个
    后盾币
    32495 个
    注册时间
    2013-10-31
    在线时间
    109 小时
    帖子
    420
     楼主| 发表于 2016-7-1 19:51:31 | 显示全部楼层
    深水鱼 发表于 2016-7-1 13:43
    把代码打包发来上一份把,点击多次的解决方法很多的。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>Document</title>
            <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript">
                    $(function(){
                            var c = 0;
                            $("#a").click(function(){
                                    if(c==0){
                                            c = 1;
                                            for(var i=0;i<$(".b").length;i++){
                                                    $(".b").eq(i).delay(300*i).animate({"top":100*(i+1)+"px","left":100*(i+1)+"px"},300);
                                            }
                                    }else{
                                            c = 0;
                                            for(var i=0;i<$(".b").length;i++){
                                                    $(".b").eq($(".b").length - (i+1)).delay(300*i).animate({"top":0+"px","left":0+"px"},300);
                                            }
                                    }
                            })
                    })
            </script>
            <style>
                    *{
                            padding: 0px;
                            margin: 0px;
                    }
                    #a{
                            width:100px;
                            height:100px;
                            background-color: red;
                            cursor: pointer;
                            position: absolute;
                            z-index: 1;
                    }
                    .b{
                            width:100px;
                            height:100px;
                            cursor: pointer;
                            position: absolute;
                    }
            </style>
    </head>
    <body>
            <div id="a"></div>
            <div class="b" style="background-color:blue;"></div>
            <div class="b" style="background-color:green;"></div>
            <div class="b" style="background-color:purple;"></div>
            <div class="b" style="background-colorrange;"></div>
            <div class="b" style="background-color:black;"></div>
    </body>
    </html>
    胜利女神在睡觉!
         
  • TA的每日心情
    难过
    2017-1-8 00:23
  • 签到天数: 143 天

    [LV.7]常住居民III

    22

    主题

    420

    帖子

    3万

    积分

    硕士

    梦~魔

    Rank: 7Rank: 7Rank: 7

    积分
    32495
    活动推广币
    0 个
    后盾币
    32495 个
    注册时间
    2013-10-31
    在线时间
    109 小时
    帖子
    420
     楼主| 发表于 2016-7-1 19:53:20 | 显示全部楼层
    大概就这样 。写了个简单点的。代码少点 。就是delay和stop冲突。但我又想他们不要一起执行动画。直接有个先后顺序
    胜利女神在睡觉!
         
  • TA的每日心情
    开心
    5 小时前
  • 签到天数: 2015 天

    [LV.Master]伴坛终老

    5013

    主题

    2万

    帖子

    244万

    积分

    管理员

    ★后盾老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2443817
    活动推广币
    12685 个
    后盾币
    2443817 个
    注册时间
    2011-5-5
    在线时间
    7397 小时
    帖子
    21710

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2016-7-4 15:58:37 | 显示全部楼层
    这个思路是错的,你可以定义一个全局变量,然后来控制当前被点击的是否需要运动。
         
  • TA的每日心情
    开心
    5 小时前
  • 签到天数: 2015 天

    [LV.Master]伴坛终老

    5013

    主题

    2万

    帖子

    244万

    积分

    管理员

    ★后盾老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2443817
    活动推广币
    12685 个
    后盾币
    2443817 个
    注册时间
    2011-5-5
    在线时间
    7397 小时
    帖子
    21710

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2016-7-4 16:01:29 | 显示全部楼层
    我看了你的代码,都是先后执行的啊。
         
  • TA的每日心情
    难过
    2017-1-8 00:23
  • 签到天数: 143 天

    [LV.7]常住居民III

    22

    主题

    420

    帖子

    3万

    积分

    硕士

    梦~魔

    Rank: 7Rank: 7Rank: 7

    积分
    32495
    活动推广币
    0 个
    后盾币
    32495 个
    注册时间
    2013-10-31
    在线时间
    109 小时
    帖子
    420
     楼主| 发表于 2016-7-5 10:51:52 | 显示全部楼层
    深水鱼 发表于 2016-7-4 16:01
    我看了你的代码,都是先后执行的啊。

    老师,我要的效果就是全部执行,但是依次执行,不是一起执行,也不是每个点击控制一个元素运动,那个代码的效果是我想要的结果。但多次点击会运动叠加。stop无效。所以我想知道这个怎么解决
    胜利女神在睡觉!
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    Archiver|小黑屋|后盾网 人人做后盾 ( 京ICP备12048441号-3 )

    GMT+8, 2017-1-18 13:56 , Processed in 0.158341 second(s), 31 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表