你好,欢迎访问我的博客!登录 评论排行榜 领券购物 免责声明 投稿本站 本站主题
当前位置:首页 - 笔记 - JS/JQ - 正文 代码,改变世界!

jQuery中的淡入与淡出效果

2018-02-12JS/JQ墨初591°c
A+ A-

JQ中给我们定义好的动画效果的函数有很多,这一篇文章我们来说一说,JQ中指定元素淡入与淡出的效果,通过这个效果函数我们可以使前端的web页面更好的呈现给访客的面前

fadeIn()方法与fadeout()方法

fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)

注:

speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:

slow:表示600毫秒

normal:表示400毫秒

fast:表示200毫秒

callback:表示fadeIn函数执行完后,要执行的函数

fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。

语法:

$(selector).fadeOut(speed,callback)

注:

speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:

slow:表示600毫秒

normal:表示400毫秒

fast:表示200毫秒

callback:表示fadeIn函数执行完后,要执行的函数

举例说明:

利用fadeIn()与fadeOut()写一个淡入淡出的效果

HTML代码

利用fadeIn()与fadeOut()写一个淡入淡出的效果

<p>飞鸟慕鱼博客欢迎您!</p>
<button id='button'>隐藏</button>
<button id='button2'>显示</button>
<!--飞鸟慕鱼博客-->

JQ代码

$("#button").click(function(){
    $("p").fadeOut("slow");
});
$("#button2").click(function(){
    $("p").fadeIn("slow");
});

结果:

我们分别点击显示和隐藏,P标签会慢慢的消失或出现

jQ中的fadeTo()方法的使用与解释

fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

语法

$(selector).fadeTo(speed,opacity,callback)

注:

speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:

slow:表示600毫秒

normal:表示400毫秒

fast:表示200毫秒

opacity:表示淡入或淡出的透明度,必须是介于0.1到1.00之间的数字

callback:标示函数执行完后,要执行的函数

举例说明一下

利用fadeTo()让P标签的透明度为0.4

HTML代码

利用fadeTo()让P标签的透明度为0.4

<p>飞鸟慕鱼博客欢迎您!</p>
<button id='button'>测试</button>

JQ代码

$("#button").click(function(){
    $("p").fadeTo("slow",0.4);
});

fadeToggle()方法解释与使用

fadeToggle():方法可以在对指定元素进行淡入或淡出的切换

语法

$(selector).fadeToggle(speed,easing,callback)

注:

speed:为效果的持续时间,单位为毫秒。它有三个默认的速度值,分别为:

slow:表示600毫秒

normal:表示400毫秒

fast:表示200毫秒

easing:规定在动画的不同点上元素的速度。默认值为 "swing"

"swing" - 在开头/结尾移动慢,在中间移动快

"linear" - 匀速移动

callback:标示函数执行完后,要执行的函数

举例说明

利用fadeToggle()方法,使P标签进行淡入或淡出效果

HTML代码

利用fadeToggle()方法,使P标签进行淡入或淡出效果

<p>飞鸟慕鱼博客欢迎您!</p>
<button id='button'>测试</button>
<!--飞鸟慕鱼博客-->

JQ代码

$("#button").click(function(){
    $("p").fadeToggle("slow");
});


  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
jQuery中的淡入与淡出效果

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


鲁哆蜜博客
时间:2018-02-12 22:48:22

如果我只看不说,江湖不会知道我来过,新年快乐,讨个红包,不知道博主给不给呢!

墨初
时间:2018-02-13 15:54:18

@鲁哆蜜博客:红包没有,不过祝福是有的。祝各位新年大吉,财源滚滚,狗年旺旺!

  用户登录