jQuery中的淡入与淡出效果

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代码

<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代码

<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代码

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

JQ代码

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