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