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

Velocity.js 官网

Velocity.js实现弹出式相框 慕课网

极棒的jquery动画切换引擎插件Velocity.js jQ库

 (function($){

   // 普通调用
   /*$('#div1').velocity({         // 元素的CSS属性
     width:'300px'
   },{                           // Velocity的选项
     duration:3000,              // 动画运动时间
     complete:function(){        // 动画完成时调用的回调函数
       $('#div2').velocity({
         width:'300px',
       },{
         duration:1000
       });
     }
   });*/

   // 动画序列
   /*var seq =[
     {
       elements:$('#div1'),
       properties:{width:'300px'},
       options:{duration:3000}
     },
     {
       elements:$('#div2'),
       properties:{width:'200px'},
       options:{duration:2000}
     },
     {
       elements:$('#div3'),
       properties:{width:'100px'},
       options:{duration:1000}
     }
   ];
   $.Velocity.RunSequence(seq);
   */

   // 预定义动画
   /*$('#div1').on('mouseover', function(){
     $(this).velocity('callout.shake');
   });*/

   // 自定义动画
   /*$.Velocity.RegisterEffect('lixin.pulse',{
     defaultDuration:300,
     calls:[
       [{scaleX:1.1},0.5],
       [{scaleX:1.0},0.5]
     ]
   });

   $('#div2').on('mouseover',function(){
     $(this).velocity('lixin.pulse');
   });*/

   var container = $('.container');
   var box = $('.box');
   var buddy = $('.buddy');
   var pop = $('.pop');
   var open = $('.btn');
   var close = $('.close');
   var imgs = pop.find('img');

   // 自定义动画
   // 由下向上渐显；
   $.Velocity.RegisterUI('lixin.slideUpIn',{
     defaultDuration:500,
     calls:[
       // 透明度由0至100；y轴由-100px到0px；
       [{opacity:[1,0],translateY:[0,100]}]
     ]
   });

   // 由上往下渐隐；
   $.Velocity.RegisterUI('lixin.slideDownOut',{
     defaultDuration:300,
     calls:[
       // 透明度由0至100；y轴由-100px到0px；
       [{opacity:[0,1],translateY:[100,0]}]
     ]
   });

   // 缩放渐显；
   $.Velocity.RegisterUI('lixin.scaleIn',{
     defaultDuration:300,
     calls:[
       // 透明度由0至100；y轴由-100px到0px；
       [{opacity:[1,0],scale:[1,0.3]}]
     ]
   });
   // 缩放渐隐；
   $.Velocity.RegisterUI('lixin.scaleOut',{
     defaultDuration:300,
     calls:[
       [{opacity:[0,1],scale:[0.3,1]}]
     ]
   });

   var seqInit = [{
     elements:container,
     properties:'lixin.slideUpIn',
     options:{
       delay:300,
       sequenceQueue:false         // 动画同步执行；
     }
   },{
     elements:box,
     properties:'lixin.slideUpIn',
     options:{
       sequenceQueue:false
     }
   },{
     elements:buddy,
     properties:'lixin.slideUpIn',
     options:{
       delay:150,
       sequenceQueue:false
     }
   }];

   var seqClick = [{
     elements:container,
     properties:'lixin.slideDownOut',
   },{
     elements:box,
     properties:'lixin.slideDownOut',
     options:{
       sequenceQueue:false
     }
   },{
     elements:container,
     properties:'lixin.slideUpIn',
     options:{
       sequenceQueue:false         // 动画同步执行；
     }
   },{
     elements:pop,
     properties:'lixin.slideUpIn',
     options:{
       sequenceQueue:false
     }
   },{
     elements:imgs,
     properties:'lixin.scaleIn',
     options:{
       sequenceQueue:false         // 动画同步执行；
     }
   }];

   var seqClose = [{
     elements:imgs,
     properties:'lixin.scaleOut',
     options:{
       sequenceQueue:false         // 动画同步执行；
     }
   },{
     elements:container,
     properties:'lixin.slideDownOut',
   },{
     elements:pop,
     properties:'lixin.slideDownOut',
     options:{
       sequenceQueue:false
     }
   },{
     elements:container,
     properties:'lixin.slideUpIn',
     options:{
       sequenceQueue:false         // 动画同步执行；
     }
   },{
     elements:box,
     properties:'lixin.slideUpIn',
     options:{
       sequenceQueue:false
     }
   }];

   $.Velocity.RunSequence(seqInit);

   open.on('click',function(){
     $.Velocity.RunSequence(seqClick);
   });

   close.on('click',function(){
     $.Velocity.RunSequence(seqClose);
   })

 })(jQuery);