-
<style> .alis{width: 100px;height: 100px;background: #f0f;margin: 10px;position: relative;} .alis1{left: 200px;opacity: 0;} .alis3{left: 20px;opacity: 1;} </style> <div class="alis alis1"></div> <div class="alis alis2"></div> <div class="alis alis3"></div>//js，回调函数和complete都可以实现动画的衔接 $(".alis1").delay(1000).velocity({left: 0,opacity:1}, 1000,function(){ $(".alis2").velocity({ opacity: 0.5, left:"300px", scale:1.3 }, { duration: 1000, complete:function(){ $(".alis4").velocity("fadeIn", { duration: 1500 }) .velocity("fadeOut", { delay: 500, duration: 1500 }) } }); }); //三个属性都带s var mySequence = [ { elements: $(".alis4"), properties: { translateX: 100 }, options: { duration: 1000 } }, { elements: $(".alis5"), properties: { translateX: 200 }, options: { duration: 1000 } }, { elements: $(".alis6"), properties: { translateX: 300 }, options: { duration: 1000 } } ]; $.Velocity.RunSequence(mySequence); //动画：http://shouce.jb51.net/velocity/command.html
运动最后的状态：
查看全部 -
使用方法查看全部
-
sequenceQueue:false - 入场序列动画同时执行，true为依次执行（默认）查看全部
-
自定义动画函数查看全部
-
自定义动画查看全部
-
opacity:0.0; 设置透明查看全部
-
cursor:pointer 鼠标移上去变成手形 transition:background-color 0.2s 颜色渐变 0.2秒时间查看全部
-
Velocity.js插件用于做动画的,不依赖jQuery查看全部
-
jquery动画在移动端卡顿，加载慢查看全部
-
velocity兼容ie8和安卓2.3，css3动画不兼容ie8，jquery是pc端的插件，在移动的性能不够好查看全部
-
增加可读性查看全部
-
2.更完美的加载方式查看全部
-
1.嵌套式 complete 上一个动画执行完后执行函数。查看全部
-
应用 velocity 执行api duration 动画执行时间查看全部
-
///查看全部
-
font family查看全部
-
demo查看全部
-
margin 为负值的时候，可以往回移动，这点很有用。查看全部
举报
0/150
提交
取消