切换风格

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

  • 咨询热线: 400-682-3231
  • QQ咨询: 联系在线客服老师 联系在线客服老师 联系在线客服老师

QQ登录

只需一步,快速开始

返回列表 发新帖

[web前端] delay和stop冲突

[复制链接]
     
  • TA的每日心情
    擦汗
    2017-4-15 11:55
  • 签到天数: 162 天

    [LV.7]常住居民III

    22

    主题

    502

    帖子

    3万

    积分

    超级VIP会员

    梦~魔

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

    [LV.Master]伴坛终老

    5025

    主题

    2万

    帖子

    270万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2701327
    活动推广币
    12685 个
    后盾币
    2701327 个
    注册时间
    2011-5-5
    在线时间
    7893 小时
    帖子
    22445

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

    QQ
    发表于 2016-7-1 13:43:25 |显示全部楼层
    把代码打包发来上一份把,点击多次的解决方法很多的。
         
  • TA的每日心情
    擦汗
    2017-4-15 11:55
  • 签到天数: 162 天

    [LV.7]常住居民III

    22

    主题

    502

    帖子

    3万

    积分

    超级VIP会员

    梦~魔

    积分
    33475
    活动推广币
    0 个
    后盾币
    33475 个
    注册时间
    2013-10-31
    在线时间
    125 小时
    帖子
    502
    发表于 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-4-15 11:55
  • 签到天数: 162 天

    [LV.7]常住居民III

    22

    主题

    502

    帖子

    3万

    积分

    超级VIP会员

    梦~魔

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

    [LV.Master]伴坛终老

    5025

    主题

    2万

    帖子

    270万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2701327
    活动推广币
    12685 个
    后盾币
    2701327 个
    注册时间
    2011-5-5
    在线时间
    7893 小时
    帖子
    22445

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

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

    [LV.Master]伴坛终老

    5025

    主题

    2万

    帖子

    270万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2701327
    活动推广币
    12685 个
    后盾币
    2701327 个
    注册时间
    2011-5-5
    在线时间
    7893 小时
    帖子
    22445

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

    QQ
    发表于 2016-7-4 16:01:29 |显示全部楼层
    我看了你的代码,都是先后执行的啊。
         
  • TA的每日心情
    擦汗
    2017-4-15 11:55
  • 签到天数: 162 天

    [LV.7]常住居民III

    22

    主题

    502

    帖子

    3万

    积分

    超级VIP会员

    梦~魔

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

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

    发表回复

    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

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