jQuery笔记——动画设计——复杂动画

最新推荐文章于 2020-12-24 10:31:43 发布

行走的鹿

最新推荐文章于 2020-12-24 10:31:43 发布

阅读量679

点赞数

文章标签： jquery 动画设计

本文链接：https://blog.csdn.net/Deer_F/article/details/53101346

版权

本文详细解析了jQuery的animate()方法，包括如何创建包含多重效果的自定义动画，animate方法的参数解释，以及模拟show()方法、动画队列、停止动画和关闭动画的操作。此外，还介绍了off属性、interval属性和delay()方法的应用，帮助开发者更好地掌握jQuery动画的高级技巧。

摘要由CSDN通过智能技术生成

创建包含多重效果的自定义动画：animate()

animate（properties , [duration] , [easing] , [callback]）

animate（properties , options）

参数解释：

properties：一组CSS属性，动画将朝着这组属性移动

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

options：一组包含动画选项的值的集合。支持的选项如下：

duration：3种预定速度之一的字符串：slow，fast，normal（默认）；或表示动画时长的毫秒数值。

easing：要使用的擦除效果名称，需要插件支持，jQuery提供linear和swing（默认）两个值

complete：在动画完成时执行的函数

step：每步动画执行后调用的函数

queue：设定为false，将使此动画不进入动画队列。默认：true

specialEasing：一组一个或多个通过相应的参数和相对简单函数定义的CSS属性。

一、模拟show()方法的效果

应用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模拟show（）方法的效果</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
           $("img").hide();
            $("button").click(function(){
                $("img").animate({
                    height:'show',
                    width:'show',
                    opacity:'show'
                },'show')
            });
        });
    </script>
</head>
<body>
<button>控制按钮1</button>
<p><img src="images/1.jpg" width="200"/></p>
</body>
</html>

二、自定义动画

关键：指定动画的形式以及动画结果样式属性的对象

应用1：单击按钮，图像恢复到原始大小

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){