jQuery 中淡入淡出效果fadeIn、fadeOut、fadeTo的用法
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeIn(speed,callback);
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
实例
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeOut(speed,callback);
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
实例
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeToggle(speed,callback);
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
实例
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
实例
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
<head>
<title></title>
<style type="text/css">
#img1
{
width:400px;
height
:500px;
}
</style>
<script src="
jquery
-1.9.1.js" type="text/
javascript
"></script>
<script type="text/javascript">
$(function () {
$('#Button1').bind('click', function () {
$('img').fadeOut(2000, function () {
$('#Button1').val('哎，没了'); //
图片
的消失
});
})
$('#Button2').bind('click', function () {
$('img').fadeIn(2000, function () {
$('#Button2').val('有了'); //图片的呈现
});
})
$('#Button3').bind('click', function () {
$('img').fadeTo(2000, 0.3, function () {
alert('
动画
执行完毕'); //图片透明度
});
})
$('#Select1').bind('change', function () { //可以是change或者是click
事件
$('img').fadeTo(1000, $('#Select1 option:selected').val());
})
})
</script>
</head>
<body>
<img src="images/1.jpg" id="img1" />
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="button" />
<input id="Button3" type="button" value="button" />
<select id="Select1">
<option>1</option>
<option>0.1</option>
<option>0.2</option>
<option>0.3</option>
<option>0.4</option>
<option>0.5</option>
<option>0.6</option>
<option>0.7</option>
<option>0.8</option>
<option>0.9</option>
<option>0</option>
</select>
</body>
jquery 如何判断是否已经fadein/fadeout? 判断是否隐藏hide()/show()
首先判断是否hide和show可以用
$('#header').is(":hidden");
不过对于fadein fadeout不好使，方法就是定义一个变量，然后在回调函数里面赋值，看代码：
$(document).ready(function() {
var headerfade = 0; // 表头是否已经隐藏
'afterLoad': function(anchorLink, index){ // index从1开始
if(index != 1){
if(headerfade == 0 ){
$('#header').fadeOut(500,function(){headerfade=1;}); // 二页隐藏菜单
}
}else{
if(headerfade == 1 ){
$('#header').fadeIn(1000,function(){headerfade=0;});
}
}
}
}
看到没，定义一个变量headerfade然后用之前判断就OK啦，其他同样道理！
hide和fadeOut 显示效果有什么区别？ show和fadeIn显示效果都一样？
很多朋友在学习jQuery的时候 会遇到这个问题 ，hide和 fadeOut都可以带有参数：
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出，当然名字不能看出具体的区别，只能体现他们是不同的而已。但是当我们把参数 speed 设置稍微长一些就可以看出区别了。并且实现的效果显示起来都差不多，所以被误以为是一样的，其实不然。
让我们写下如下代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button.dl").click(function(){
$("#div1").fadeOut(3000);
});
});
$(document).ready(function(){
$("button.dll").click(function(){
$("#div2").hide(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里，使红色矩形1淡出(fadeOut)</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br><br>
<button class="dll">点击这里，使红色矩形2隐藏(hide)</button>
<br><br>
<div id="div2" style="width:80px;height:80px;background-color:red;"></div>
</body>
</html>
好了 现在我们可以测试下了，怎么样区别一目了然吧。
没错，hide隐藏的效果是从下至上或从右下到左上的慢慢折叠缩小，而fadeOut的淡出效果是整体淡化直至消失。好了 现在我们可以测试下了，怎么样区别一目了然吧。
同理 show和fadeIn也是这样的区别，大家自己改下代码试下吧。
IE下 jquery的fadeIn与fadeOut方法失效的BUG
BUG1:绝对定位嵌套绝对定位
这个问题遇到过好多次，因为没有做笔记，所以每次遇到这个问题都要研究半天。好记性不如烂笔头，这话一点没错。
<div id="show_list">
<div class="" val="0">
<div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="posab alce" style="top:200px; width:260px; left:80px;">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
<p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">测试测试测试</p>
</div>
</div>
<div class="" val="0">
<div class=" posab" style="top:50px; left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="posab alce" style="top:200px; width:260px; left:80px;">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
<p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">测试测试测试</p>
</div>
</div>
<div>
posab 是绝对定位的class
只要把绝对定位换成浮动，就可以实现淡隐淡出的效果了。
<div id="show_list">
<div class="posab" val="0">
<div class="" style="margin-top:50px; float:left; margin-left:260px"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="alce" style="margin-top:-200px; width:260px; margin-left:80px; float:left">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;">测试测试测试</p>
<p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">测试测试测试</p>
</div>
</div>
<div class="posab" val="0">
<div class="" style="margin-top:50px; margin-left:260px;"> <img class="png_bg" src="/uploads/productimage/164613_634717302959421250.png" /></div>
<div class="alce" style="margin-top:-200px; width:260px; margin-left:80px;float:left">
<p class=" f18 l22 alce" style="color:#e99417; margin-top:20px;float:left">测试测试测试</p>
<p class=" f14 l22 alce" style="color:#e99417;">测试测试测试</p>
<p class="lk444 f14 l22 alce" style="margin-top:5px;">测试测试测试</p>
</div>
</div>
<div>
具体的位置需要做一些调整
BUG2：父级绝对定位嵌套大于父级尺寸的图片
还有一种情况，是IE8独有的BUG，格式如下
<div class=" posab" style=" top:80px; left:260px;width:550px;height:55px">
<img class="png_bg" src="image.jpg" />
</div>
如果图片的大小超过了div的大小，在IE8下面淡隐淡出效果将会失效
BUG3:
网上还差了一种bug，具体没有遇到过，现也贴上：
IE6 IE7 IE8 在 position : relative 时fadeIn() fadeOut() bug 解决方案
先看一个例子
<div class="fadein">
<div>
<div>I am going to fade in ;</div>
<div>I am going to fade in ;</div>
</div>
</div>
$('.fadein').fadeIn();
以上代码基本上在所有主流浏览器都可以达到预期效果
但是现实是残酷的， 大家的html结构当然不会这么简单。
我们再加一点东东
<style>
.relative{position: relative;}
</style>
<div class="fadein">
<div class="relative">
<div>I am going to fade in ;</div>
<div>I am going to fade in ;</div>
</div>
</div>
$('.fadein').fadeIn();
这个时候在IE 6 78 就会吭爹的事情出现， 动画不出现有木有! 直接show出来有木有！
这是臭名昭著的 IE 大bug： 如果fadeIn的元素的子元素有position属性时 以relative值为最严重 有position属性的元素不会出现fadeIn的效果！
可能的曲线解决方法：
1， 不用position: relative; 这个嘛 有时候可以做到
2，如果1实在做不到， 比如笔者遇到的情况，那就用each()。 你可以一个一个做这个效果， 这个当然是可以做到的， 不过效率太差， 搞不好会挂掉用户的电脑，比如笔者遇到的情况，有几十个上百个子元素 这个方法是万万使不得滴。。
针对性解决办法
我们要在使用position:relative 而且不使用each()的情况下达到这个效果，可以吗？
可以！
既然这是一个bug 那一定就有hack的方法
$('.fadein').css('position', 'relative').fadeIn();
在fadeIn()之前动态的将其position属性改为relative; 会解决IE7下的这个bug
<style>
.relative{position: relative; filter: inherit}
</style>
在你子元素有position属性的元素加 filter: inherit; 当前元素的第一层子元素也要加。
这两条一结合 IE678 的问题就都解决了
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
