阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.FadeThis 中文API文档

      插件 jQuery.FadeThis 中文API文档

      源码 & 下载

      适用场景

      插件特点

      用于淡入淡出功能的轻量级jQuery插件 http://lwiesel.github.io/jquery-fadethis

      基本用法

      用法

      包含jQuery:

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      

      包含插件的代码:

      <script src="dist/jquery.fadethis.min.js"></script>
      

      调用插件:

      $(window).fadeThis();
      

      从左边出现

      <div class="slide-left"></div>
      

      出现在右边

      <div class="slide-right"></div>
      

      从顶部出现

      <div class="slide-top"></div>
      

      从底部出现

      <div class="slide-bottom"></div>
      

      高级用法

      设置整个页面的配置

      $(window).fadeThis({speed: 1000});
      <div class="slide-left"></div>
      

      设置每个块的配置

      $('.block').fadeThis({speed: 1000});
      <div class="block">
          <div class="slide-left"></div>
      </div>
      

      定义元素选项时,规则是先到先得。为块设置的选项不会覆盖使用相同元素或页面选项的先前块选项。因此,如果您使用块选项定义,请不要使用$(window).fadeThis()之前!

      使用HTML5数据属性设置每个元素的配置

      $(…).fadeThis(…);
      
      <div class="slide-right" data-plugin-options='{"speed":200, "distance":400}'></div>
      

      由数据属性设置的选项会覆盖每个块设置的任何其他选项。

      请注意数据属性的引号的位置和顺序。

      对于某些浏览器,还原此顺序可能会导致对选项的误解。

      组态

      速度

      默认值:500

      动画速度,以毫秒为单位。

      距离

      默认值:50

      在动画之前,元素到它的位置的距离。

      抵消

      默认值:0

      滚动偏移,允许在元素出现之后或之前消除褪色。

      缓解

      默认:“swing”

      动画缓和。

      如果您正在使用自定义缓动,则可能还需要使用jQuery Easing。

      相反

      默认值:true

      滚动时Make元素会再次消失,滚动时会再次淡出。

      如果要在元素出现一次后让元素保留在页面上,请将其设置为false。

      baseName的

      默认:“slide-”

      目标元素的基类名称。

      scrolledIn

      默认值:null

      元素进入视口时调用的函数。 即使reverse设置为false,也始终调用此函数。

      scrolledOut

      默认值:null 元素离开视口时调用的函数。 即使reverse设置为false,也始终调用此函数。

      支持的浏览器

      如果您使用jQuery 1.x,那么在这些浏览器上使用jQuery.FadeThis是安全的:

      • IE 6+
      • 边缘12+
      • Firefox 2+
      • Safari 3+
      • Chrome 8+
      • Opera 10.6+
      • iOS 6+

      如果您使用jQuery 2.x,那么在这些浏览器上使用jQuery.FadeThis是安全的:

      • IE 9+
      • 边缘12+
      • Firefox 3+
      • Safari 5+
      • Chrome 10+
      • Opera 11+
      • iOS 6+
      目录
      目录