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

 

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

fadeOut(speed,callback)

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

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

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

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

fadeIn(speed, callback)

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

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

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


fadeTo(speed,opacity,callback)

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

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

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

所有代码

%0D%0A%0D%0A%0D%0AfadeOut(speed,callback)%20
%0D%0A%E9%80%9A%E8%BF%87%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E7%9A%84%E5%8F%98%E5%8C%96%E6%9D%A5%E5%AE%9E%E7%8E%B0%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%A1%E5%87%BA%E6%95%88%E6%9E%9C%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82

%0D%0A

%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82

%0D%0A

%0D%0A%20%0D%0A%E7%82%B9%E5%87%BBfadeOut1%E5%B0%86%E6%89%A7%E8%A1%8C%24("#fadeOut").fadeOut("slow",function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E6%85%A2%E6%85%A2%E6%B6%88%E5%A4%B1%E4%BA%86%EF%BC%81")%7D);%0D%0A

%0D%0A

%0D%0A

fadeIn(speed,%20callback)

%0D%0A

%E9%80%9A%E8%BF%87%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E7%9A%84%E5%8F%98%E5%8C%96%E6%9D%A5%E5%AE%9E%E7%8E%B0%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%B7%A1%E5%85%A5%E6%95%88%E6%9E%9C%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82

%0D%0A

%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82%20

%0D%0A

%0D%0A%0D%0A%E7%82%B9%E5%87%BBfadeIn1%E5%B0%86%E6%89%A7%E8%A1%8C%20%24("#fadeIn").fadeIn("slow",function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E6%85%A2%E6%85%A2%E5%87%BA%E7%8E%B0%E4%BA%86%EF%BC%81")%7D);

%0D%0A

%0D%0AfadeTo(speed,opacity,callback)%0D%0A

%E6%8A%8A%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%E4%BB%A5%E6%B8%90%E8%BF%9B%E6%96%B9%E5%BC%8F%E8%B0%83%E6%95%B4%E5%88%B0%E6%8C%87%E5%AE%9A%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E5%B9%B6%E5%9C%A8%E5%8A%A8%E7%94%BB%E5%AE%8C%E6%88%90%E5%90%8E%E5%8F%AF%E9%80%89%E5%9C%B0%E8%A7%A6%E5%8F%91%E4%B8%80%E4%B8%AA%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E3%80%82

%0D%0A

%E8%BF%99%E4%B8%AA%E5%8A%A8%E7%94%BB%E5%8F%AA%E8%B0%83%E6%95%B4%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E6%89%80%E6%9C%89%E5%8C%B9%E9%85%8D%E7%9A%84%E5%85%83%E7%B4%A0%E7%9A%84%E9%AB%98%E5%BA%A6%E5%92%8C%E5%AE%BD%E5%BA%A6%E4%B8%8D%E4%BC%9A%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E3%80%82

%0D%0A%0D%0A%E7%82%B9%E5%87%BBfadeIn1%E5%B0%86%E6%89%A7%E8%A1%8C%20%24("#fadeTo").fadeTo("slow",0.5,function()%7Balert("%E6%98%AF%E4%B8%8D%E6%98%AF%E4%B8%8B%E9%9D%A2%E8%BF%99%E4%B8%AA%E5%B1%82%E9%80%8F%E6%98%8E%E5%BA%A6%E5%8F%98%E6%88%9050%%E4%BA%86%EF%BC%81")%7D);

%0D%0A

%0D%0A

%0D%0A

%0D%0A

%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80:http://www.cnjquery.com/demo/jquery%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B%E4%BA%94(%E6%95%88%E6%9E%9C%E5%87%BD%E6%95%B0%E4%B9%8BfadeIn,fadeOut%E5%92%8CfadeTo).html

%0D%0A

%0D%0A