自定义动画animate()
Posted yuyujuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义动画animate()相关的知识，希望对你有一定的参考价值。
在上一节总结了一下3中类型的动画，其中show()和hide()方法会同时修改元素的多个属性，fadeOut()和fadeIn()方法只会修改元素的不透明度，而slideDown()和slideUp()方法只会改变元素的高度，但是很多情况下，需要对动画有更多控制，这些方法无法满足用户的需求，这时，jQuery中的自定义动画animate()就可以用来解决这些高级的动画问题了。
1，语法结构
首先来看一下该方法的语法结构：animate(params,speed,callback)
- params：一个包含样式属性及值的映射
- speed：速度参数，可选
- callback：在动画完成时执行的函数，可选,
在开始操作前，先在html中新建一个div元素，具体如下，接下的所有操作均在此基础上进行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <style type="text/css"> #box1 { position:relative; width:100px; height:100px; border:1px solid #0050d0; background-color: #96e555; } </style> </head> <body> <div id="box1"></div> </body> </html>
2，自定义简单动画
animate()也可以像前面的方法那样，让元素动起来，而且动画效果可以更加精致新颖。
首先要实现的是鼠标悬浮时元素向右移动。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"100px"},3000); }) }) </script>
上面的代码能实现鼠标悬浮时，元素移动到距离左边100px出的位置，移动时间用时3000毫秒。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"+=100px"},3000); }) }) </script>
这段代码也是让元素移动，不同的是，这段代码是让元素在当前的位置上进行累加的，即继续向右移动100px,而上面的代码则与当前位置无关，直接将元素移动到距离左边100px处。
3，多重动画
就是执行多个动画，比如让元素既能向右滑动，又能放大元素。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px"},3000); }) }) </script>
上面这段代码能同时实现两个效果，让元素的向右移动和高度增加同时发生，用时均为3000毫秒。
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px"},3000); $(this).animate({height:"200px"},3000); }) }) </script>
上面这段代码也能实现两个效果，但是两个效果是分开执行，前3000毫秒用来实现向右移动，移动结束后，后3000毫秒用来实现高度增加。上面的两个动画均是对同一个对象进行操作，因此可以采用链式的写法：
<script type="text/javascript"> $(function(){ $("#box1").hover(function(){ $(this).animate({left:"200px"},3000) .animate({height:"200px"},3000); }) }) </script>
向这种动画的执行效果具有先后顺序，称为“动画队列”。
4，综合动画
接下来要完成更复杂的动画，鼠标悬浮的时候，让元素向右移动的同时增大它的高度，并将它的透明度从50%变换到100%，然后再让它从上到下移动，同时它的宽度变大，当完成这些效果后，让它以淡出的方式隐藏。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut("slow"); }) }) </script>
上面的效果可以分解为3步，第一步是在前3000毫秒同时实现右移动，高度增加和透明度变化，第二步是在第二个3000毫秒同时实现向下移动和宽度增加，第三步实现淡出隐藏，并通过链式的方式将这三步进行排队依次执行。
5，动画回调函数
如果，我们想在上面的综合动画中，将元素的淡出隐藏改为切换元素的css样式，如果我们继续采用上面的方法，是不能得到理想的效果的。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000) .css("border","5px solid blue"); }) }) </script>
虽然我们的css写在了最后面，预期在动画的最后一步改变元素样式，但实际情况是，刚开始执行动画的时候，最后的css()方法就被执行，这是因为css()并不是animate()，不会被加到动画队列中，而是立即执行，此时，如果我们想要达到预期的效果，可是使用回调函数对非动画方法实现排队。
<script type="text/javascript"> $(function(){ $("#box1").css("opacity","0.5") $("#box1").hover(function(){ $(this).animate({left:"200px",height:"200px",opacity:‘1‘},3000) .animate({top:"200px",width:"200px"},3000,function(){ $(this).css("border","5px solid blue"); }) }) }) </script>
以上是关于自定义动画animate()的主要内容，如果未能解决你的问题，请参考以下文章