在關(guān)閉后再次進(jìn)入會出現(xiàn)圖片跟隨pop一起進(jìn)入的動畫,然后再瞬間消失,再以設(shè)定好的由小到大的動畫入場

$(function(){
????//(function($){
????var?container?=?$('.container');
????var?box?=?$('.box');
????var?buddy?=?$('.buddy');
????var?inner?=?$('.inner');
????var?pop?=?$('.pop');
????var?close?=?$('.close');
????var?open?=?$('.btn');
????var?imgs?=?pop.find('img');
????//定義動畫
????//高度變化入場動畫
????$.Velocity.RegisterUI('lixin.slideUpIn',{
????????defaultDuration:?500,
????????calls:?[
????????????//opacity:透明度,1:結(jié)束時的透明度,0:開始的
????????????//translateY:Y軸的高度變化
????????????[{opacity:?[1,0],translateY:?[0,100]}]
????????]
????});
????//高度變化出場動畫
????$.Velocity.RegisterUI('lixin.slideDownOut',{
????????defaultDuration:?300,
????????calls:?[
????????????[{opacity:?[0,1],translateY:?[100,0]}]
????????]
????});
????//大小變化的入場動畫
????$.Velocity.RegisterUI('lixin.scaleIn',{
????????defaultDuration:?300,
????????calls:?[
????????????//scale:大小變化,從0.3到1倍大小
????????????[{opacity:?[1,0],scale:?[1,0.3]}]
????????]
????});
????//大小變化的出場動畫
????$.Velocity.RegisterUI('lixin.scaleOut',{
????????defaultDuration:?300,
????????calls:?[
????????????//scale:大小變化,從0.3到1倍大小
????????????[{opacity:?[0,1],scale:?[0.3,]}]
????????]
????});
????var?seqInit?=?[
????????{
????????????elements:?container,
????????????properties:?'lixin.slideUpIn',
????????????option:?{
????????????????delay:?300
????????????}
????????},
????????{
????????????elements:?box,
????????????properties:?'lixin.slideUpIn',
????????????option:?{
????????????????sequenceQueue:?false
????????????}
????????},?{
????????????elements:?buddy,
????????????properties:?'lixin.slideUpIn',
????????????option:?{
????????????????sequenceQueue:?false,
????????????????delay:?60
????????????}
????????}
????];
????var?seqClick?=?[
????????{
????????????elements:?container,
????????????properties:?'lixin.slideDownOut'
????????},{
????????????elements:?box,
????????????properties:?'lixin.slideDownOut',
????????????option:?{
????????????????sequenceQueue:?false
????????????}
????????},?{
????????????elements:?container,
????????????properties:?'lixin.slideUpIn'
????????},?{
????????????elements:?pop,
????????????properties:?'lixin.slideUpIn',
????????????option:?{
????????????????sequenceQueue:?false
????????????}
????????},{
????????????elements:?imgs,
????????????properties:?'lixin.scaleIn'
????????}
????];
????var?seqClose?=?[
????????{
????????????elements:?imgs,
????????????properties:?'lixin.scaleOut'
????????},{
????????????elements:?container,
????????????properties:?'lixin.slideDownOut'
????????},{
????????????elements:?pop,
????????????properties:?'lixin.slideDownOut',
????????????option:?{
????????????????sequenceQueue:?false
????????????}
????????},?{
????????????elements:?container,
????????????properties:?'lixin.slideUpIn'
????????},?{
????????????elements:?box,
????????????properties:?'lixin.slideUpIn',
????????????option:?{
????????????????sequenceQueue:?false
????????????}
????????},{
????????????elements:?imgs,
????????????properties:?'lixin.scaleIn'
????????}
????];
????$.Velocity.RunSequence(seqInit);
????open.on('click',function(){
????????$.Velocity.RunSequence(seqClick);
????});
????close.on('click',function(){
????????$.Velocity.RunSequence(seqClose);
????});
????????//})(jQuery);
});