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