-
<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,回調(diào)函數(shù)和complete都可以實(shí)現(xiàn)動(dòng)畫的銜接 $(".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?}) ????} ????}); }); //三個(gè)屬性都帶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); //動(dòng)畫:http://shouce.jb51.net/velocity/command.html
運(yùn)動(dòng)最后的狀態(tài):
查看全部 -
使用方法查看全部
-
sequenceQueue:false - 入場(chǎng)序列動(dòng)畫同時(shí)執(zhí)行,true為依次執(zhí)行(默認(rèn))查看全部
-
自定義動(dòng)畫函數(shù)查看全部
-
自定義動(dòng)畫查看全部
-
opacity:0.0; 設(shè)置透明查看全部
-
cursor:pointer 鼠標(biāo)移上去變成手形 transition:background-color 0.2s 顏色漸變 0.2秒時(shí)間查看全部
-
Velocity.js插件用于做動(dòng)畫的,不依賴jQuery查看全部
-
jquery動(dòng)畫在移動(dòng)端卡頓,加載慢查看全部
-
velocity兼容ie8和安卓2.3,css3動(dòng)畫不兼容ie8,jquery是pc端的插件,在移動(dòng)的性能不夠好查看全部
-
增加可讀性查看全部
-
2.更完美的加載方式查看全部
-
1.嵌套式 complete 上一個(gè)動(dòng)畫執(zhí)行完后執(zhí)行函數(shù)。查看全部
-
應(yīng)用 velocity 執(zhí)行api duration 動(dòng)畫執(zhí)行時(shí)間查看全部
-
///查看全部
-
font family查看全部
-
demo查看全部
-
margin 為負(fù)值的時(shí)候,可以往回移動(dòng),這點(diǎn)很有用。查看全部
舉報(bào)
0/150
提交
取消