58种jQuery模拟CSS3过渡页面切换特效|Fade-Overlay_jQuery之家-自由分享jQuery、html5、css3的插件库

Overlay Slide

正常淡入淡出模式

切换到正常模式

Installation

Step 1: Link required files

<!-- animsition CSS -->
<link rel="stylesheet" href="../dist/css/animsition.min.css">

<!-- vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- animsition js -->
<script src="../dist/js/jquery.animsition.min.js"></script>

Step 2: HTML markup

<body>

  <div class="animsition-overlay" data-animsition-overlay="true">


    <a href="./page1" class="animsition-link">animsition link 1</a>

    <a href="./page2" class="animsition-link">animsition link 2</a>

  </div>

</body>

If you want each "linkElement" to use a different animation.

<a
    href="./page1"
    class="animsition-link"
    data-animsition-out="overlay-slide-out-top"
    data-animsition-out-duration="2000"
  >
    animsition link 1
  </a>

  <a
    href="./page2"
    class="animsition-link"
    data-animsition-out="overlay-slide-out-right"
    data-animsition-out-duration="500"
  >
    animsition link 2
  </a>

If you want to each page to use a different animation.

<div
  class="animsition-overlay"
  data-animsition-overlay="true"
  data-animsition-in="overlay-slide-in-top"
  data-animsition-in-duration="1000"
  data-animsition-out="overlay-slide-out-top"
  data-animsition-out-duration="800"
>
  ...
</div>

Step 3: Call the animsition

$(document).ready(function() {
  
  $(".animsition-overlay").animsition({
  
    inClass               :   'overlay-slide-in-top',
    outClass              :   'overlay-slide-out-top',
    inDuration            :    1500,
    outDuration           :    800,
    linkElement           :   '.animsition-link',
    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
    loading               :    true,
    loadingParentElement  :   'body', //animsition wrapper element
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ],
    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    
    overlay               :   true,
    
    overlayClass          :   'animsition-overlay-slide',
    overlayParentElement  :   'body'
  });
});