jQuery动画效果2（animate移位效果/stop停止/delay延时效果）

叶炀

于 2015-07-30 15:34:22 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习记录-jQuery 文章标签： jQuery 动画效果

本文链接：https://blog.youkuaiyun.com/yeyang123_fy/article/details/47150409

学习记录-jQuery 专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery的animate方法创建自定义动画，包括元素位置的移动，强调在移动前设置元素的position属性。同时，文章也讲解了stop方法用于在动画未完成时停止当前所有动画，并讨论了delay方法如何实现动画效果的延时执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、调用animate()方法可以创建自定义动画效果

它的调用格式为：

$(selector).animate({params},speed,[callback])

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative

<body>
        <h3>制作移动位置的动画</h3>
        <span></span>
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $("span").animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
            });
        </script>
    </body>