jQuery-自定义动画animate

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

零OO

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

阅读量326

点赞数

分类专栏：前端文章标签： jquery 动画前端

本文链接：https://blog.csdn.net/qq_39111074/article/details/120703890

版权

前端专栏收录该内容

222 篇文章 8 订阅

订阅专栏

animate()使用方法

animate(要改边的属性集合，动画速度，切换效果，回调函数)

要改边的属性集合- - - 以对象的形式传递，必须写，属性名可以不用带引号，如果是复合属性需要采用驼峰命名法，如 backgroundColor。
动画速度- - -“slow”、“normal”、“fast”或者动画时长的毫秒数值（eg：1000- - -1秒）
切换效果- - -默认是“swing”（先快后慢），可以用“liner”（匀速）
回调函数- - -动画完成时执行的函数，每个元素执行一次。

要改边的属性集合是必需要写的，后面几个参数可以不写

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义动画</title>
    <style>
        img {
            position: absolute;
            width: 100px;
            height: 100px;
        }
    </style>
    <script src="js/jQuery.min.js"></script>
</head>
<body>
    <button>点击图片变化</button>
    <div>
        <img src="images/小狐狸3.jpg" alt="">
    </div>
    <script>
        $("button").click(function() {
            $("img").animate({
                /* left: "300px",
                top: "300px",
                width: "222px",
                height: "222px" 
                写法效果和下面写法一样，如果属性值是数字可以不带单位
                */
                left: 300,
                top: 300,
                width: 222,
                height: 222
            },500);
        });
    </script>
</body>
</html>

页面效果：

自定义动画animate.gif

零OO

关注

0
点赞
踩
1

收藏

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

animate()使用方法animate(要改边的属性集合，动画速度，切换效果，回调函数)要改边的属性集合- - - 以对象的形式传递，必须写，属性名可以不用带引号，如果是复合属性需要采用驼峰命名法，如 backgroundColor。动画速度- - -“slow”、“normal”、“fast”或者动画时长的毫秒数值（eg：1000- - -1秒）切换效果- - -默认是“swing”（先快后慢），可以用“liner”（匀速）回调函数- - -动画完成时执行的函数，每个元素执行一次。要改边的属
复制链接

扫一扫

专栏目录