JQuery中的animate自定义动画

最新推荐文章于 2023-08-10 16:36:12 发布

li宾是我哥

最新推荐文章于 2023-08-10 16:36:12 发布

阅读量1.7k

点赞数

文章标签： jquery 动画 javascript

本文链接：https://blog.csdn.net/gx01013/article/details/126321986

版权

animate()方法用于创建自定义动画。

概述 .animate( properties [, duration ] [, easing ] [, complete ] )

properties
- 类型: PlainObject
  
  一个CSS属性和值的对象,动画将根据这组对象移动。
- duration (默认: 400)
  
  类型: Number or String
  
  一个字符串或者数字决定动画将运行多久。或表示动画时长的毫秒数值(如：1000) ）
- easing (默认: swing)
  
  类型: String
  
  一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
- complete
  
  类型: Function()
  
  在动画完成时执行的函数。

语法：

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

必需的params参数定义形成动画的CSS属性。
可选的speed参数规定效果的时长。它可以取以下值：“slow”、“fast”或者毫秒。
可选的callback参数是动画完成所执行的函数名称。

例子：

<body>
    <input type="button" value="自定义动画" id="btn">
    <div>利宾一家人</div>
    <script>
        $(function() {
            $("#btn").on("click", function() {
                $("div").animate({
                    "left": "500px",
                    "top": "400px"
                }).animate({
                    "font-size": "30px"
                })
            })
        })
    </script>
</body>

效果图：

li宾是我哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery中的animate自定义动画

一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）一个字符串或者数字决定动画将运行多久。或表示动画时长的毫秒数值(如：1000) ）一个CSS属性和值的对象,动画将根据这组对象移动。animate()方法用于创建自定义动画。类型: Number or String。类型: PlainObject。类型: Function()在动画完成时执行的函数。类型: String。...
复制链接

扫一扫