转载

jQuery文章章节平滑切换过渡动画特效

简要教程

这是一款可以实现文章章节段落平滑切换过渡的jQuery特效。该特效在用户点击了切换按钮之后，当前界面垂直缩小为一条线，再变为一个点消失，接着从这个消失点的位置再逆向打开新的章节界面。

查看演示 下载插件

使用方法

HTML结构

这个例子中的HTML结构分为两个部分：第一个部分是当前的主界面，包裹在<main>元素中，第二个部分是要切换的章节界面，包裹在<section>元素中。

<main>  <section class="main">   <div class="container mainContent">   <h1>......</h1>     <p>......</p>     <button class="about">About</button>   </div>  </section> </main> <section class="aboutSection">  <div class="container aboutContent">   <h1>About</h1>   <p>......</p>   <button class="home">Home</button>  </div> </section>

JavaScript

该文章章节切换特效主要使用的是jQuery的animate方法来完成，代码非常简单，它通过不断的设置元素的min-height，height，top，padding，padding-top和padding-bottom属性来完成。

$(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);   });  }); });

来源 jQuery之家

正文到此结束