$('#div1').fadeIn(1000); //渐变显示。1000毫秒，表示动画显示过程时间。
$('#div1').fadeOut(1000); //渐变隐藏
$('#div1').fadeToggle(1000); //合成显示隐藏
$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。
<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>渐变显示隐藏动画</title><style>#div1 {width:100px; height:100px;background-color:black;}</style><script src="scripts/jquery-1.7.1.min.js"></script><script>$(function() {//渐变显示按钮$('#btnFadeIn').click(function(){//$('#div1').fadeIn();$('#div1').fadeIn(1000); //1000毫秒，表示动画渐变过程时间。});//渐变隐藏按钮$('#btnFadeOut').click(function(){//$('#div1').fadeOut();$('#div1').fadeOut(1000);});//合成按钮$('#btnTotal').click(function(){//$('#div1').fadeToggle();$('#div1').fadeToggle(1000);});//半透明显示按钮$('#btnBan').click(function(){$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。});});</script></head><body><input type="button" id="btnFadeIn" value="显示"/><input type="button" id="btnFadeOut" value="隐藏"/><input type="button" id="btnTotal" value="合成"/><input type="button" id="btnBan" value="半透明"/><div id="div1"></div></body></html>
