HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 查看内容

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

2015-10-16 14:07| 发布者: html5cn| 查看: 950| 评论: 0|来自: jQuery之家

摘要: 这是一款可以实现文章章节段落平滑切换过渡的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之家


鲜花

握手

雷人

路过

鸡蛋
更多

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 10:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部