jQuery动画切换引擎插件Velocity.js

Velocity.js 官网

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);

 

posted @ 2015-10-21 15:54  翌子涵  阅读(386)  评论(0编辑  收藏  举报