<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
运动最后的状态:
