Animate方法

最新推荐文章于 2023-09-22 16:47:39 发布

weixin_30666401

最新推荐文章于 2023-09-22 16:47:39 发布

阅读量97

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vickyloveweb/archive/2013/03/20/2972351.html

版权

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     })();

.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     })();

转载于:https://www.cnblogs.com/vickyloveweb/archive/2013/03/20/2972351.html

weixin_30666401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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<...
复制链接

扫一扫