插件 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+

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了