-
<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
提交
取消