注册 登录 充值会员 退出
毕业设计 PHP源码
充值

jQuery文章章节全屏动画切换效果

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2017-09-17
jQuery文章章节全屏动画切换效果
jQuery文章章节全屏动画切换效果是一款鼠标点击按钮网页平滑过渡动画全屏切换特效。


js代码

<script>
$(function () {
	'use strict';
	var main = $('.main'), about = $('.aboutSection');
	$('.about').click(function () {
		main.animate({
			'height': '0',
			'top': '50vh',
			'padding': '0'
		}, 300).animate({
			'width': '2px',
			'left': '50%'
		}, 900).fadeOut(200, function () {
			about.fadeIn(200);
			about.animate({
				'width': '100%',
				'left': '0'
			}, 900);
			about.animate({
				'min-height': '100vh',
				'top': '0',
				'padding-top': '50px',
				'padding-bottom': '50px'
			}, 300);
		});
	});
	$('.home').click(function () {
		about.animate({
			'min-height': '0',
			'height': '0',
			'top': '50vh',
			'padding': '0'
		}, 300).animate({
			'width': '2px',
			'left': '50%'
		}, 900).fadeOut(200, function () {
			main.fadeIn(200).animate({
				'width': '100%',
				'left': '0'
			}, 900).animate({
				'height': '100vh',
				'top': '0',
				'padding-top': '100px',
				'padding-bottom': '100px'
			}, 300);
		});
	});
});
</script>