Animate方法
Full Control with The Animate Method:
Public HTML code:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Custom Effect Methods</title> 6 <style> 7 .box{ 8 width: 400px; 9 background:red; 10 padding: 2em; 11 position:relative; 12 } 13 </style> 14 </head> 15 <body> 16 17 <div class='box'> 18 <h2>Reveal</h2> 19 <p> 20 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 21 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 22 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 23 </p> 24 </div> 25 26 <p><button>Increase</button></p> 27 28 <script src="js/jquery-1.9.1.min.js"></script> 29 <script src="animate.js"></script> 30 </body> 31 </html>
animate.js:
1.
animate( properties [, duration ] [, easing ] [, complete ] )
properties:An object of CSS properties and values that the animation will move toward
duration(default: 400): A string or number determining how long the animation will run.
easing (default: swing):A string indicating which easing function to use for the transition.
complete:A function to call once the animation is complete
1 (function(){ 2 var box = $('div.box'); 3 //fontSize = parseInt(box.css('font-size'),10); 4 5 $('button').bind('click',function(){ 6 box.animate({ 7 'fontSize':'+=5', 8 'width': '+=300' 9 }, 500, 'swing', function() { 10 console.log('completed'); 11 }); 12 }) 13 14 })();
2.
.animate( properties, options )
options:A map of additional options to pass to the method.
options include: duration,easing,queue,specialEasing,step,progress,complete,done,fail,always
queue (default: true):A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.
step:A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
1 (function(){ 2 var box = $('div.box'); 3 //fontSize = parseInt(box.css('font-size'),10); 4 5 $('button').bind('click',function(){ 6 box.animate({ 7 'fontSize':'+=5', 8 'width': '+=300' 9 }, { 10 duration: 500, // 11 complete: function(){ 12 console.log('completed'); 13 }, 14 step: function () { 15 console.log('the current font-size is: '+$(this).css('fontSize')); 16 } 17 }); 18 }) 19 20 })();
3.排队效果：多个.animate()连缀
1 (function(){ 2 var box = $('div.box'), 3 //fontSize = parseInt(box.css('font-size'),10); 4 w = $(window).width()/2 - box.outerWidth()/2, 5 h = $(window).height()/2 - box.outerHeight()/2; 6 7 $('button').bind('click',function(){ 8 box.animate({ 9 'left': w, 10 'position': 'absolute' 11 }) 12 .animate({ 13 'top': h 14 }, 2000); 15 }) 16 17 18 })();
4.第二个参数包含了queue选项，把该选项设置为false即可让当前动画与前一个动画同时开始。
（1）
1 (function(){ 2 var box = $('div.box'); 3 //fontSize = parseInt(box.css('font-size'),10); 4 5 $('button').bind('click',function(){ 6 box.animate({ 7 'fontSize':'+=5', 8 'width': '+=300' 9 }, { duration: 500 }) 10 .animate({'top': '500'},{duration:3000, queue:false});//'queue:false' ,the second animate would execute at the same time as the one before that. 11 }); 12 13 })();
（2）
1 (function(){ 2 var box = $('div.box'), 3 //fontSize = parseInt(box.css('font-size'),10); 4 w = $(window).width()/2 - box.outerWidth()/2, 5 h = $(window).height()/2 - box.outerHeight()/2; 6 7 $('button').bind('click',function(){ 8 box.animate({ 9 'left': w, 10 'position': 'absolute' 11 }) 12 .animate({ 13 'top': h 14 }, {duration:200, queue:false}); 15 }) 16 17 })();
