这篇文章。
Velocity.js包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$( "div" ).velocity({
property1: value1,
property2: value2
}, { /* Default options */
duration: 400,
easing: "swing" ,
queue: "" ,
complete: null ,
loop: false ,
delay: false ,
display: false ,
mobileHA: true
}); |
Velocity.js同样支持jQuery的参数简写语法:$element.velocity(propertyMap [, duration] [, easing] [, complete]):,比如:
1
2
3
|
$( "div" ).velocity({ left: 100 }, 1000);
$( "div" ).velocity({ left: 100 }, 1000, "swing" );
$( "div" ).velocity({ left: 100 }, "swing" );
|
Velocity.js官方宣传Velocity的目标是成为DOM中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js,由于Velocity.js的方法签名和$.animate()一样,因此只需将方法名从animate改为velocity即可。在其官方网站给出了几个绚丽的Demo,读者可以参考学习。
参考文档
- http://julian.com/research/velocity/
- http://davidwalsh.name/css-js-animation
- https://news.ycombinator.com/item?id=7663775
版权声明:除特别声明外,本站所有文章皆是本站原创,转载请以超链接形式注明出处!