注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

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

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2022-04-09
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>