怎么我的点击“查看详情”之后跳出来的是这个界面?

来源:3-4 按钮点击后的动画

二五七

2015-09-18 15:57


http://img.mukewang.com/55fbc3a80001dc5003410524.jpg

// JavaScript Document
(function($){
	
	// 定义变量
	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:[
			[{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:[
			[{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
		}
	},{
		elements:box,
		properties:'lixin.slideUpIn',
		options:{
			sequenceQueue:false
		}
	},{
		elements:buddy,
		properties:'lixin.slideUpIn',
		options:{
			sequenceQueue:false,
			delay:60
		}
	}];
		
	var seqClick = [{
		elements:container,
		properties:'lixin.slideDownOut',
	},{
		elements:box,
		properties:'lixin.slideDownOut',
		options:{
			sequenceQueue:false
		}
	},{
		elements:container,
		properties:'lixin.slideUpIn'
	},{
		elements:pop,
		proterties:'lixin.slideUpIn',
		options:{
			sequenceQueue:false
		}
	},{
		elements:imgs,
		properties:'lixin.scaleIn'
	}];
	
	var seqClose = [{
		elements:imgs,
		properties:'lixin.scaleOut'
	},{
		elements:container,
		properties:'lixin.slideDownOut'
	},{
		elements:pop,
		properties:'lixin.slideDownOut',
		options:{
		     sequenceQueue:false	
		}
	},{
		elements:container,
		properties:'lixin.slideUpIn'
	},{
		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);


写回答 关注

1回答

  • specialshoot
    2015-12-15 21:53:41

    css文件或html文件可能写的有问题,把所有代码都贴出来看看

Velocity.js实现弹出式相框

超给力动画插件,动画从此信手拈来,从此网页变得生动起来

27005 学习 · 63 问题

查看课程

相似问题