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

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

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

创建包含多重效果的自定义动画: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(){
                $("img").animate({
                   width:"100%",
                    height:"100%"
                },1000);
            });
        })
    </script>
</head>
<body>
<button>控制按钮1</button>
<p><img src="images/1.jpg" width="200"></p>
</body>
</html>
参数:

properties:一组包含作为动画属性和终值的样式属性和其值的集合,形式:

                     

                    {
                         width:"90%",
                         height:"100%",
                         fontSize:"10em",
                         borderWidth:10
                    }

                       注意:所有指定的属性必须采用驼峰命名的形式
                      如果属性值是一个数值,属性样式就会从当前的值渐变到指定的值

                      如果使用的是hide,show,toggle等特定字符串值,则会为该属性调用默认的动画形式

                      例如:

                 $("#btn2").click(function(){
                $("#p2").animate({
                    width:"200%",
                    height:"200%",
                    fontSize:"5em",
                    height:'toggle',
                    opacity:'toggle'
                },1000)
            });
持续时间以毫秒为单位,可设置预定义字符:fast  ,slow , normal。若为0,表示直接完成动画


应用2:左右移动div

<!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(){
            $("input").eq(0).click(function(){
                $("div").animate({
                    left:"100px"
                },1000)
            });
            $("input").eq(1).click(function(){
                $("div").animate({
                    left:"200px"
                },1000)
            });
        })
    </script>
</head>
<body>
<input type="button" value="向左运动"/>
<input type="button" value="向右运动"/>
<div style="position: absolute;left: 200px;border: solid 1px red">自定义动画</div>
</body>
</html>
注意:要是div元素能自由移动,必须设置它的定位方式为绝对定位,相对定位或固定定位。如果是静态定位,则无效。

            移动的动画总是以默认位置为参照物

应用3:动画队列

<!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(){
           $("input").click(function(){
               $("div").animate(                   //第一个动画
                   {height:"120%"},
                   {duration:5000,queue:false}
               ).animate({                         //第二个动画,将与第一个动画并列进行
                           fontSize:"10em"
                       },1000).animate({           //第三个动画
                           opacity:0
                       },2000);
           });
        });
    </script>
</head>
<body>
<input type="button" value="自定义动画"/>
<div style="border: solid 1px red">自定义动画</div>
</body>
</html>

三、动态定位
animate()不仅可以控制样式属性,还可以控制其他属性如top,left等

但必须明确限制。如:

调整left属性时,元素定位要在relative或absolute下。

所有块级元素默认的CSS定位属性都是static,这个值精确地表明,在改变元素的定位属性之前试图移动它们,它们只会保持静止不动。

应用:

<!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(){
               $("p").animate({
                   left:200,
                   top:200,
                   opacity:.5
               },2000,"linear",function(){alert("动画完成");})
           });
        });
    </script>
</head>
<body>
<button>控制按钮1</button>
<p style="position: relative"><img src="images/1.jpg" width="200"></p>
</body>
</html>
注意:当清除<p>标签中的position:relative之后,动画将无效。


四、停止动画

随时停止在指定元素上正在运行的动画:stop()

stop([clearQueue] , [jumpToEnd])

参数解释:

clearQueue:布尔值,指示是否取消队列动画,默认:false

jumpToEnd:布尔值,指示当前动画是否立即完成,默认:false

当一个元素调用stop()时,当前正在运行的动画(如果有)立即停止。

注意:

1.如果一个元素用slideUp()隐藏时,stop()方法被调用,元素现在仍然被显示,但将是先前高度的一部分。不调用回调函数。

2.如果同一元素调用多个动画方法,后来的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个动画完成。当调用stop()方法时,队列中的下一个方法立即开始。如果clearQueue为true,那么在队列中的其余动画被删除并永远不会运行。

3.如果jumpToEnd为true时,当前动画将停止,但该元素会立即给予每个CSS属性的目标值。当需要对元素做mouseenter和mouseleave动画时,stop()方法明显是有效的。

应用:

<!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(){
           $("input").eq(0).click(function(){
               $("div").animate({
                   fontSize:"10em"
               },8000);
           }) ;
            $("input").eq(1).click(function(){
                $("div").stop();
            });
        });
    </script>
</head>
<body>
<input type="button" value="自定义动画"/>
<input type="button" value="停止动画"/>
<div style="border: solid 1px red">自定义动画</div>
</body>
</html>

五、关闭动画

off属性:

true时,调用时所有的动画方法将立即设置元素为他们的最终状态,而不是显示效果。

解决了jQuery动画存在的以下问题:

1. jQuery被用在低资源设备

2. 动画使用户遇到可访问问题

3. 动画可以通过设置这个属性为false重新打开

<!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(){
            jQuery.fx.off = true;
            $("input").click(function(){
                $("div").animate({
                    fontSize:"10em"
                },8000);
            });
        });
    </script>
</head>
<body>
<input type="button" value="自定义动画">
<div style="border: 1px solid red">自定义动画</div>
</body>
</html>


六、设置动画频率

interval属性:

设置动画频率,以毫秒为单位。jQuery动画默认是13毫秒。

修改其为较小的数字可使动画在更快的浏览器中运行的更流畅。如:Chrome,但这样做有可能影响性能

<!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(){
            jQuery.fx.interval = 100;                  //修改jQuery的帧频为100,将会看到更加精细的动画效果
            $("input").click(function(){
                $("div").toggle(3000);
            });
        });
    </script>
    <style type="text/css">
        div{width: 50px;height: 30px;margin: 5px;float: left;background: green;}
    </style>
</head>
<body>
<input type="button" value="运行动画">
<div></div>
</body>
</html>

七、延迟动画

Delay():

delay(duration , [queueName])

参数解释:

duration:一个用于设定队列推迟执行的时间,以毫秒为单位的整数

queueName:作为队列名的字符串,默认是动画队列 fx

可推迟动画队列中函数的执行,也可用于自定义队列。

毫秒为单位,数值越大,动画越慢。fast:200,slow:600

例如:

$("#foo").slideUp(300).delay(800).fadeIn(400);
300ms卷起,暂停800ms,400ms淡入

jQuery.delay()用来在jQuery动画效果和类似队列中是最好的,但不是替代JavaScript原生的setTimeOut函数(更适用于通常情况)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值