Jquery.velocity动画

最新推荐文章于 2023-06-25 20:51:27 发布

莎拉维尔_艺

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签：动画 jquery

本文链接：https://blog.youkuaiyun.com/qq_30224167/article/details/53537532

Web前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Jquery.velocity动画库的使用，包括引入插件、基本函数用法、CSS属性、执行选项、对象组动画、动画序列、特定指令动画及属性运算等。通过实例解析，帮助开发者掌握这一强大的动画工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入相关插件

<!--首先引入Jquery插件-->
<script type="text/javascript" src='/source/JQuery/jquery-2.0.min.js'></script>
<script type="text/javascript" src='/source/Velocity/velocity.min.js'></script>
<script type="text/javascript" src='/source/Velocity/velocity.ui.min.js'></script>

2.函数基本用法

jQuery元素.velocity(CSS变更属性对象, 动画执行选项对象);

$('.classname').css({
    'color': '#ff3333',
    'width': '500px',
    'rotateZ': '60deg',
    'translateX' : '100px'
},{
    'duration' : 1000,
    'delay' : 500,
    'ease' : 'linear'
});

3.CSS常用属性解释

backgroundColor : '背景颜色';
rotateX     : 'X轴翻转角度'(rotateY,rotateZ同理);
translateX  : 'X轴位移度(20px)'(translateY同理);
以‘-’连接的CSS原属性需改为驼峰命名

4.动画执行选项对象解释

duration    : '动画执行时间';
delay   : '动画执行延迟时间';
begin   : '动画执行开始回调函数';
complete : '动画执行结束回调函数';
loop    : '动画循环次数';
display : '动画执行结束元素显示状态';
visibility : '动画执行结束元素显隐状态';
easing  : '动画执行速度函数':
    linear : 匀速运动
    ease-in: 匀加速运动
    ease-out: 匀减速运动
    自定义函数: [0,1.05,1,.07] ([函数生成地址](http://cubic-bezier.com "函数生成地址")

5.对象组动画执行（选择一组对象执行动画）

$.Velocity({e:对象组, p:CSS变更属性对象, o: 动画执行选项对象})

var doms    = document.getElemetsByClassName('classname');
$.Velocity({
    e: doms,
    p: {width: '200px', height: '100px', translateX: '50px', rotateZ: '180deg'},
    o: {duration: 1000, easing: linear, delay: 5000}
});

6.执行动画序列（按顺序执行一些列动画需要加载velocity.ui）

$.Velocity.RunSequence(序列对象);

var aniQuence   = [
    {e: $('.cname-a'), p: {translateX: '200px', color: '#FF3333'}, o: {duration: 1000}},
    {e: $('.cname-b'), p: {translateX: '200px', color: '#33FF33'}, o: {duration: 1000}},
    {e: $('.cname-c'), p: {translateX: '200px', color: '#3333FF'}, o: {druation: 1000}}
];
$.Velocity.RunSequence(aniQuence);

7.执行特定指令动画

jquery元素.velocity('特定指令', 动画执行选项对象);

$('.classname').velocity('scroll', {duration: 400, offset : '-100px'});
    scroll: 滚动至元素上方边缘
    reverse: 还原至上一状态（回退）
    slideUp: 上滑消失
    slideDown: 下滑展示
    fadeIn: 渐隐
    fadeOut: 渐显