Velocity.js 官网
极棒的jquery动画切换引擎插件Velocity.js jQ库
1 (function($){ 2 3 // 普通调用 4 /*$('#div1').velocity({ // 元素的CSS属性 5 width:'300px' 6 },{ // Velocity的选项 7 duration:3000, // 动画运动时间 8 complete:function(){ // 动画完成时调用的回调函数 9 $('#div2').velocity({ 10 width:'300px', 11 },{ 12 duration:1000 13 }); 14 } 15 });*/ 16 17 // 动画序列 18 /*var seq =[ 19 { 20 elements:$('#div1'), 21 properties:{width:'300px'}, 22 options:{duration:3000} 23 }, 24 { 25 elements:$('#div2'), 26 properties:{width:'200px'}, 27 options:{duration:2000} 28 }, 29 { 30 elements:$('#div3'), 31 properties:{width:'100px'}, 32 options:{duration:1000} 33 } 34 ]; 35 $.Velocity.RunSequence(seq); 36 */ 37 38 // 预定义动画 39 /*$('#div1').on('mouseover', function(){ 40 $(this).velocity('callout.shake'); 41 });*/ 42 43 // 自定义动画 44 /*$.Velocity.RegisterEffect('lixin.pulse',{ 45 defaultDuration:300, 46 calls:[ 47 [{scaleX:1.1},0.5], 48 [{scaleX:1.0},0.5] 49 ] 50 }); 51 52 $('#div2').on('mouseover',function(){ 53 $(this).velocity('lixin.pulse'); 54 });*/ 55 56 57 var container = $('.container'); 58 var box = $('.box'); 59 var buddy = $('.buddy'); 60 var pop = $('.pop'); 61 var open = $('.btn'); 62 var close = $('.close'); 63 var imgs = pop.find('img'); 64 65 // 自定义动画 66 // 由下向上渐显； 67 $.Velocity.RegisterUI('lixin.slideUpIn',{ 68 defaultDuration:500, 69 calls:[ 70 // 透明度由0至100；y轴由-100px到0px； 71 [{opacity:[1,0],translateY:[0,100]}] 72 ] 73 }); 74 75 // 由上往下渐隐； 76 $.Velocity.RegisterUI('lixin.slideDownOut',{ 77 defaultDuration:300, 78 calls:[ 79 // 透明度由0至100；y轴由-100px到0px； 80 [{opacity:[0,1],translateY:[100,0]}] 81 ] 82 }); 83 84 // 缩放渐显； 85 $.Velocity.RegisterUI('lixin.scaleIn',{ 86 defaultDuration:300, 87 calls:[ 88 // 透明度由0至100；y轴由-100px到0px； 89 [{opacity:[1,0],scale:[1,0.3]}] 90 ] 91 }); 92 // 缩放渐隐； 93 $.Velocity.RegisterUI('lixin.scaleOut',{ 94 defaultDuration:300, 95 calls:[ 96 [{opacity:[0,1],scale:[0.3,1]}] 97 ] 98 }); 99 100 var seqInit = [{ 101 elements:container, 102 properties:'lixin.slideUpIn', 103 options:{ 104 delay:300, 105 sequenceQueue:false // 动画同步执行； 106 } 107 },{ 108 elements:box, 109 properties:'lixin.slideUpIn', 110 options:{ 111 sequenceQueue:false 112 } 113 },{ 114 elements:buddy, 115 properties:'lixin.slideUpIn', 116 options:{ 117 delay:150, 118 sequenceQueue:false 119 } 120 }]; 121 122 var seqClick = [{ 123 elements:container, 124 properties:'lixin.slideDownOut', 125 },{ 126 elements:box, 127 properties:'lixin.slideDownOut', 128 options:{ 129 sequenceQueue:false 130 } 131 },{ 132 elements:container, 133 properties:'lixin.slideUpIn', 134 options:{ 135 sequenceQueue:false // 动画同步执行； 136 } 137 },{ 138 elements:pop, 139 properties:'lixin.slideUpIn', 140 options:{ 141 sequenceQueue:false 142 } 143 },{ 144 elements:imgs, 145 properties:'lixin.scaleIn', 146 options:{ 147 sequenceQueue:false // 动画同步执行； 148 } 149 }]; 150 151 var seqClose = [{ 152 elements:imgs, 153 properties:'lixin.scaleOut', 154 options:{ 155 sequenceQueue:false // 动画同步执行； 156 } 157 },{ 158 elements:container, 159 properties:'lixin.slideDownOut', 160 },{ 161 elements:pop, 162 properties:'lixin.slideDownOut', 163 options:{ 164 sequenceQueue:false 165 } 166 },{ 167 elements:container, 168 properties:'lixin.slideUpIn', 169 options:{ 170 sequenceQueue:false // 动画同步执行； 171 } 172 },{ 173 elements:box, 174 properties:'lixin.slideUpIn', 175 options:{ 176 sequenceQueue:false 177 } 178 }]; 179 180 181 $.Velocity.RunSequence(seqInit); 182 183 open.on('click',function(){ 184 $.Velocity.RunSequence(seqClick); 185 }); 186 187 close.on('click',function(){ 188 $.Velocity.RunSequence(seqClose); 189 }) 190 191 })(jQuery);