jquery基础教程五(渐变效果函数之fadeIn,fadeOut和fadeTo)

我们来看看是如何实现淡入 淡出效果的.

(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$("#fadeOut1").click(function(){
       $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});
    })

这里我们说需要说明的是
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 |

用法和fadeOut 一样,只不过是一个相反的过程


(speed,opacity,callback)

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$("#fadeTo1").click(function(){
       $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});
    })
0.5表示将不透明度成50%

所有代码

fadeOut(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

点击fadeOut1将执行$("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了！")});

fadeIn(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

点击fadeIn1将执行 $("#fadeIn").fadeIn("slow",function(){alert("是不是下面这个层慢慢出现了！")});

fadeTo(speed,opacity,callback)

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

点击fadeIn1将执行 $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了！")});

演示地址: