jQueryVelocity.js

jQueryVelocity.js

// 对传入的jQuery对象执行序列动画， 依次执行序列动画，然后执行回调函数
// target: jQuery对象
// before：动画的初始状态
// after：动画的结束状态
// interval：每个动画之间的间隔
// duration：单个动画的持续时间
// callback：执行完序列中最后一个动画后的回调函数
function animVelocity(target, before, after, interval, duration, callback) {
	target.each(function(i){
		var t = $(this);
		setTimeout(function() {
			t.velocity('stop').velocity(before, {duration: 0}).velocity(after, {
				duration: duration,
				complete: i==target.length-1 ? callback : null
		});
		}, (i+1) * interval);
	});
}

// 利用animVelocity执行的转场动画
function fadeInFromUpToDown(target, callback) {
	var before = {
		opacity: '0',
		translateY: '-100%'
	};
	var after = {
		opacity: '1',
		translateY: 'none'
	};
	animVelocity(target, before, after, 20, 300, callback);
}
function fadeInFromDownToUp(target, callback) {
	var before = {
		opacity: '0',
		translateY: '100%'
	};
	var after = {
		opacity: '1',
		translateY: 'none'
	};
	animVelocity(target, before, after, 20, 300, callback);
}
function fadeOutFromUpToDown(target, callback) {
	var before = {
		opacity: '1',
		translateY: 'none'
	};
	var after = {
		opacity: '0',
		translateY: '100%'
	};
	animVelocity(target, before, after, 20, 300, callback);
}
function fadeOutFromDownToUp(target, callback) {
	var before = {
		opacity: '1',
		translateY: 'none'
	};
	var after = {
		opacity: '0',
		translateY: '-100%'
	};
	animVelocity(target, before, after, 20, 300, callback);
}