jQuery文章章节平滑切换动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery文章章节平滑切换动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery文章章节平滑切换动画特效 </title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<main>
   <section class="main">
	  <div class="container mainContent">
		<div class="zzsc">
			<h1>jQuery文章章节平滑切换动画特效 <span>Section Transition With jQuery Animation</span></h1>
		</div>
		 <button class="about">About</button>
	  </div>
   </section>
  </main>

  <section class="aboutSection">
   <div class="container aboutContent">

	  <h1>About</h1>

	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt asperiores libero suscipit in sit exercitationem ad blanditiis. Reiciendis vero sed ipsam delectus in! Fuga omnis recusandae adipisci odio libero ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt asperiores libero suscipit in sit exercitationem ad blanditiis. Reiciendis vero sed ipsam delectus in! Fuga omnis recusandae adipisci odio.</p>


	  <button class="home">Home</button>

   </div>
  </section>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<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>
</body>
</html>

CSS代码(styles.css):

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:none;}
body{text-align:center;/*font-family:'Open Sans',sans-serif;*/
 -webkit-font-smoothing:antialiased;color:#fff;padding:0;margin:0;}
.container{width:80%;margin:0 auto;}
body h1{font-size:40px;font-weight:300;letter-spacing:1px;word-spacing:2px;text-align:center}
body p{line-height:1.8em;font-size:18px;color:#eee;letter-spacing:1px;font-weight:300;margin:50px auto;}
button{/*font-family:'Open Sans',sans-serif;*/
 padding:9px 40px;border:none;background:#fff;font-size:15px;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;border-bottom:2px solid #ddd;color:#4089A6;font-weight:400;text-transform:uppercase;cursor:pointer}
button.home{color:#3bb17c}
section{padding:30px 0;margin:0;position:absolute;overflow:hidden;height:100vh;top:0;left:0;}
section.main{background:#4089A6;height:100vh;z-index:99;border-top:1px solid #4089A6;border-bottom:1px solid #4089A6;}
section.aboutSection{background:#3bb17c;height:2px;padding:0;top:50vh;left:50%;width:5px;display:none;border-top:1px solid #3bb17c;border-bottom:1px solid #3bb17c;}
@media screen and (max-width:830px){section{overflow-y:scroll;}
}

附件:下载该文件资源,减少时间成本(增值服务)