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

来源：互联网发布：mac腾讯微云同步盘编辑：程序博客网时间：2024/06/05 05:27

创建包含多重效果的自定义动画：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函数（更适用于通常情况）

0 0