首页 > web前端 > js教程 > 正文

实例分享jQuery plugin animsition使用小结

小云云
发布: 2017-12-29 09:20:34
原创
2615 人浏览过

不知道大家对 plugin animsition有多少了解,本文通过实例代码给大家分享了jQuery plugin animsition用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。

用法整理

实现的效果是,各种不同效果的转场效果

<p class="animsition">
  <p class="item bg-indigo">
   <h1>Animsition: Sandbox</h1>
  </p>
  <h2>Defaults</h2>
  <ol>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page1.html" rel="external nofollow" >Basic</a></li>
   <li><a class="animsition-link" data-animsition-out-class="rotate-out"
 data-animsition-out-duration="500" href="page2.html" rel="external nofollow" >Options</a></li>
  </ol>
 </p>

<script src="jquery-3.2.1.min.js"></script>
  <script src="js/animsition.js"></script>
 <script>
  $(document).ready(function() {
 $(".animsition").animsition({
  inClass: 'flip-in-y',
  outClass: 'flip-out-y',
  inDuration: 1500,
  // outDuration: 800,
  linkElement: '.animsition-link',
  // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
  loading: false,
  loadingParentElement: 'body', //animsition wrapper element
  loadingClass: 'animsition-loading',
  loadingInner: '', // e.g '<img src="loading.svg" />'
  timeout: false,
  timeoutCountdown: 5000,
  onLoadEvent: true,
  browser: [ 'animation-duration', '-webkit-animation-duration'],
  // "browser" 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 : false,
  overlayClass : 'animsition-overlay-slide',
  overlayParentElement : 'body',
  // transition: function(url){ window.location.href = url;}
 });
});
  </script>
登录后复制

  注意!!!css文件的.animistion类的opacity设置了为0;需要改过来,要不然页面元素看不到!!!

相关推荐:

jQuery UI 日期选择器Datepicker详解

jQuery实现表格前端排序功能详解

实例详解jQueryMobile窗体长内容的缺陷与解决方法

以上是实例分享jQuery plugin animsition使用小结的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!