Animate方法

snake_hand

浏览: 625006 次

最近访客更多访客>>

u012363178

Netpet_11

tsaowe

zhuxinyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

分享到：

JQuery 回车切换文本焦点 | $.toJSON的用法或把数组转换成json类型（转 ...

2013-06-12 14:51
浏览 303
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Animate方法

1.

animate( properties [, duration ] [, easing ] [, complete ] )

.animate( properties, options )

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Animate方法

1.

animate( properties [, duration ] [, easing ] [, complete ] )

.animate( properties, options )

评论

发表评论

相关推荐

最近访客更多访客>>