<!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>
<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>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<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>
jQuery实现的文章章节平滑切换动画特效源码.zip
版权申诉
68 浏览量
2022-11-07
23:58:15
上传
评论
收藏 38KB ZIP 举报
jQuery实现的文章章节平滑切换动画特效源码.zip （8个子文件） 
132692075331115934 css 
default.css 6KB styles.css 2KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 3KB js jquery-2.1.1.min.js 82KB资源评论
