jquery中动画（animal）只运行一次的问题！

最新推荐文章于 2022-08-30 19:40:01 发布

原创最新推荐文章于 2022-08-30 19:40:01 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画

在jQuery中遇到动画(animal)只执行一次的问题，原因为第二次执行时动画效果失效。该问题出现在尝试使组件向左滑动并随后复原的场景。问题在于复原后，再次执行动画时不工作。解决办法是避免使用固定right值，而是利用相对值来实现动画效果，确保动画可以正常重复执行。

jquery中动画（animal）只运行一次的问题！

本人想要编写的功能是：组件向左滑动一段距离之后，滑动结束之后，将组件复原（回到原来位置）！

具体代码：

    $("#content").animate({right:'0'},3000,function() {
                        var first=$("#content li:first-child").clone(true);
                        $("#content li:first-child").remove();
                        $("#content").append(first);
                        $("#content").animate({left:'0'},1);
                    });

出现的问题是$("#content").animate({left:'0'},1);在复原之后，第二次执行动画效果的时候不执行了！也就是第二次的动画效果失效了！这个问题我没有找到原因！

解决方案：

$("#content").animate({right:'+=200px'},3000,function() {
                        var first=$("#content li:first-child").clone(true);
                        $("#content li:first-child").remove();
                        $("#content").append(first);
                        $("#content").animate({right:'-=200px'},1);
                    });