在jQuery中，如果我們想要實現元素的淡入淡出這種漸變效果，有3組方法：
淡入和淡出效果，本質上其實都是通過改變元素的“透明度”（opacity屬性）來實現的。
在jQuery中，我們可以使用fadeIn()方法來實現元素的淡入效果，使用fadeOut()方法來實現元素的淡出效果。fadeIn()和fadeOut()這2個方法都是配合使用的。
語法：
$().fadeIn(speed , callback) $().fadeOut(speed , callback)
說明：
speed為可選參數，表示動畫執行的速度，單位為毫秒，默認為200毫秒。如果speed參數省略，則采用默認速度。
callback為可選參數，表示動畫執行完成之後的回調函數。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_out").click(function () {
$("img").fadeOut();
});
$("#btn_in").click(function () {
$("img").fadeIn();
});
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_out" type="button" value="淡出" />
<input id="btn_in" type="button" value="淡入" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
很多人會發現，淡入淡出效果跟“帶上速度”的顯示隱藏效果幾乎一模一樣！Yes ,you’re right！但是不要被浮華給蒙蔽了雙眼。這2組方法還是略有區別的。
不過這2組方法在動畫顯示與隱藏完成之後，都會設置display:none或者display:block。
這2組方法它們在視覺上也有差別，例如hide()隱藏的效果是從下到上或從右下到左上慢慢折疊縮小，而fadeOut的淡出效果是整體淡化直至消失。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_hide").click(function () {
$("#img1").hide(500);
});
$("#btn_show").click(function () {
$("#img1").show(500);
});
$("#btn_out").click(function () {
$("#img2").fadeOut();
});
$("#btn_in").click(function () {
$("#img2").fadeIn();
});
})
</script>
</head>
<body>
<img id="img1" src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_hide" type="button" value="隱藏" />
<input id="btn_show" type="button" value="顯示" /><br />
<img id="img2" src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_out" type="button" value="淡出" />
<input id="btn_in" type="button" value="淡入" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
從這個例子，我們就可以很直觀地認識show()和hide()、fadeIn()和fadeOut()這2組方法的實際動畫效果的不同之處了。
在jQuery中，我們還可以使用fadeToggle()方法通過不透明度變化來切換匹配元素的“顯示狀態”。也就是說，如果元素是顯示狀態，則變成隱藏狀態；如果元素是隱藏狀態，則變成顯示狀態。fadeToggle()方法跟toggle()方法很相似，不過toggle()方法通過改變height、width、opacity來實現動畫的顯示與隱藏，而fadeToggle()只通過opacity來實現動畫的顯示與隱藏。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn_toggle").click(function () {
$("#img1").toggle(500);
});
$("#btn_fade").click(function () {
$("#img2").fadeToggle();
});
})
</script>
</head>
<body>
<img id="img1" src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_toggle" type="button" value="toggle()切換" /><br />
<img id="img2" src="../App_images/lesson/run_jq/jquery.png" alt=""/><br />
<input id="btn_fade" type="button" value="fadeToggle()切換" />
</body>
</html>
在浏覽器預覽效果如下：
在jQuery中，fadeIn()和fadeOut()這2種方法都是通過改變元素的透明度來實現淡入淡出的動畫效果。其中在淡入效果中，透明度（opacity）從0.0變化到1.0；在淡出效果中，透明度（opacity）從1.0變化到0.0。
如果我們想要將元素透明度指定到某一個值，則可以使用fadeTo()方法。
語法：
$().fadeTo(speed , opacity , callback)
說明：
speed為可選參數，表示動畫執行的速度，單位為毫秒，默認為500毫秒。如果speed參數省略，則采用默認速度。
opacity為必選參數，表示元素指定的透明度，取值范圍為0.0~1.0。
callback為可選參數，表示動畫執行完成之後的回調函數。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("img").hover(function () {
$(this).fadeTo(200, 0.8);
}, function () {
$(this).fadeTo(200, 1.0);
})
})
</script>
</head>
<body>
<img src="../App_images/lesson/run_jq/jquery.png" alt=""/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用合成事件hover()來定義鼠標移入移出圖片時的顯示效果。當然對於這種顯示效果，我們同樣可以使用CSS來定義。