学到jQuery自定义动画时遇到的一个小问题

滑稽之霸

于 2018-08-21 18:14:43 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

文章标签：前端 jQuery

本文链接：https://blog.youkuaiyun.com/qq_42926749/article/details/81912311

在学习jQuery自定义动画时，遇到一个问题：点击按钮后，预期元素向右移再向左移，但只执行一次。经过老师指导，发现设置left和right属性同时为0会导致冲突，解决方案是调整动画实现方式。

先贴个有问题的源码：

    $(function () {
        $('input').click(function () {
            //animae(styles,speed,easing,callback)
            //参数一 需要传动画的样式，对象 必填
            //参数二 动画的执行时间
            //参数三 动画的执行效果 swing 摇摆式的 linear 匀速的
            //参数四 回调函数
            $('#box1').animate({right:0},function () {
                $(this).animate({left:0});
            });
        })
    })

这里是想点击按钮后，让一个块向右移再向左移，结果点第一下ok，后面就不行了，后来问过老师发现，如果这样设置的话，相当于是给它的left和right各一个0，这样就会冲突，如果是改成下面这样就好：

    $(function () {
        $('input').click(function () {
            //animae(styles,speed,easing,callback)
            //参数一 需要传动画的样式，对象 必填
            //参数二 动画的执行时间
            //参数三 动画的执行效果 swing 摇摆式的 linear 匀速的
            //参数四 回调函数
            $('#box1').animate({left:1000},function () {
                $(this).animate({left:0});
            });
        })
    })