jQuery之animate自定义动画

最新推荐文章于 2022-08-13 17:33:59 发布

weixin_46370867

最新推荐文章于 2022-08-13 17:33:59 发布

阅读量187

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46370867/article/details/110505597

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下面是对jQuery自定义动画的整理，希望可以帮助到有需要的小伙伴。
jQuery的animate()方法可以用来自定义动画方法
语法结构如下：

animate(properties,duration,callback)
properties - 动画的CSS样式，动画将根据该样式移动
设置动画执行结束的样式属性值
duration - 动画执行的时长,单位是毫秒
callback - 在动画完成时执行的回调函数。
animate(properties,options)
properties - CSS的样式属性
设置动画执行结束的样式属性值
options - 设置动画的相关参数
speed - 动画执行的时长，单位是毫秒
callback - 在动画完成时执行的回调函数
queue - 布尔值，设置是否添加到动画队列中, false表示立即开始动画
实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate()自定义动画</title>
    <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <script>
  
        // $("#box").animate({
        //     width : 100,
        //     height : 100
        // },3000);

        // $("#box").animate({
        //     left : 100
        // },3000);

        $("#box").animate({
            left: 100
        }, {
            speed: 3000
        });


    </script>
</body>

</html>

最后小编要写一下细节问题：
1. 动画中 animate 的 width / height / left / top 等值没有单位 " px "
2. 动画中 animate 的 width / height / left / top 等值用逗号分隔
3. 动画中的可以写多个回调函数
在这里插入图片描述

weixin_46370867

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery之animate自定义动画

下面是对jQuery自定义动画的整理，希望可以帮助到有需要的小伙伴。jQuery的animate()方法可以用来自定义动画方法语法结构如下：animate(properties,duration,callback)properties - 动画的CSS样式，动画将根据该样式移动设置动画执行结束的样式属性值duration - 动画执行的时长,单位是毫秒callback - 在动画完成时执行的回调函数。animate(properties,options)properties - CSS的
复制链接

扫一扫

专栏目录