jquery API animate介绍：http://www.css88.com/jqapi-1.9/animate/
定义和用法
jQuery animate() 方法用于创建自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
语法 1
$(selector).animate(styles,speed,easing,callback)
speed：
可选。规定动画的速度。默认是 "normal"。"slow"、"normal"、"fast"分别表示600ms、400ms和200ms
可能的值：
- 毫秒 （比如 1500）
- "slow"
- "normal"
- "fast"
easing：
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数：
- swing "swing" - 在开头/结尾移动慢，在中间移动快
- linear "linear" - 匀速移动
callback
可选。animate 函数执行完之后，要执行的函数。
例子1：animate() - 操作多个属性
<script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', '150px' }); }); }); </script>
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
例子2：animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});
例子3. 链式写法,多个属性运动：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery animate</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> .demo { padding: 10px; margin: 100px 0 0 100px; } .square-big { 300px; height: 300px; display: block; position: relative; border: 1px solid black; margin: 20px 0; } .square-small { display: block; 20px; height: 20px; position: absolute; background-color: red; } </style> </head> <body> <div class="demo"> <div class="square-big"> <div class="square-small"></div> </div> </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> (function animation() { var options = { duration: 100, easing: 'linear' }; $('.square-big').find('.square-small') .animate({ left: 280, top: 280 }, options ) .animate({ left: 0, }, options ) .animate({ left: 280, top: 0, }, options ) .animate({ left: 0, }, $.extend(true, {}, options, { complete: function() { animation(); } }) ); })(); </script> </html>
语法 2
$(selector).animate(styles,options)
options
可选。规定动画的额外选项。
可能的值：
- duration: (默认: 400)动画运行时间
- easing - 规定要使用的 easing 函数
- callback - 规定动画完成之后要执行的函数
- step - 规定动画的每一步完成之后要执行的函数
- queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
- specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
- progress - Function( Promise animation, Number progress, Number remainingMs ) 每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。
- complete：在动画完成时执行的函数。
- done：在动画完成时执行的函数。
- fail：动画失败完成时执行的函数。
- always：在动画完成或未完成情况下停止时执行的函数。
演示start、complete和progress
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery animate</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> .demo { padding: 10px; margin: 100px 0 0 100px; } .rectangle { width: 300px; height: 20px; display: block; position: relative; border: 1px solid black; margin: 20px 0; } .square-big { width: 300px; height: 300px; display: block; position: relative; border: 1px solid black; margin: 20px 0; } .square-small { display: block; width: 20px; height: 20px; position: absolute; background-color: red; } </style> </head> <body> <div class="demo"> <div class="rectangle"> <div class="square-small"></div> </div> <button id="animation-button">Run!</button> <span id="percentage">0</span>% </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> $('#animation-button').click(function() { var $button = $(this); $('.rectangle').find('.square-small').css({"left":0}); $('.rectangle') .find('.square-small') .animate({ left: 280 }, { duration: 2000, start: function() { $button.prop('disabled', true); }, complete: function() { $button.prop('disabled', false); }, progress: function(animation, progress) { $('#percentage').text(Math.round(progress * 100)); } } ); }); </script> </html>
例子2：演示step:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery animate</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> .demo { padding: 10px; margin: 100px 0 0 100px; } .block { position: relative; background-color: #abc; width: 40px; height: 40px; float: left; margin: 5px; } </style> </head> <body> <div class="demo clearfix"> <div> <button id="go">Run »</button> <span id="percentage">0</span>% </div> <div class="block" id="block0"></div> <div class="block" id="block1"></div> <div class="block" id="block2"></div> <div class="block" id="block3"></div> <div class="block" id="block4"></div> <div class="block" id="block5"></div> </div> </body> <script src="jquery/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> <script type="text/javascript"> $( "#go" ).click(function() { $( ".block:first" ).animate({ left: 100 }, { duration: 1000, step: function(now, fx){ $(".block:gt(0)").css("left", now); var data = fx.elem.id + ' ' + fx.prop + ': ' + now; $('body').append('<div>' + data + '</div>'); }, progress: function(animation, progress) { $('#percentage').text(Math.round(progress * 100)); } }); }); </script> </html>
例子3：specialEasing：
pecialEasing参数表示由animate()方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按钮</button> <button id="reset">恢复</button> <div id="box" style="position:relative;height: 100px; 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){ history.go(); }) $('#btn').click(function(event){ $('#box').animate({'left':'100px','width':'100px'},{ specialEasing:{ left:'linear', 'swing' } }); }); </script>
-------------------