jQuery文章中章节全屏动画切换

1、新建html文档。

3、书写hmtl代码。<main><section class="main"> <div class="container mainContent"> <div class="zzsc"> <h1>jQuery文章章节平滑切换动画特效 <span>Section Transition With jQuery Animation</span></h1> </div> <p>第一个切换</p> <button class="about">About</button> </div></section></main><section class="aboutSection"><div class="container aboutContent"> <h1>About</h1> <p>第一2个切换</p> <button class="home">Home</button></div></section>

5、书写并添加js代码。<script src="js/jquery-2.1.1.min.js"></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>

7、查看效果。