因为是动画效果，所以不好贴图片，大家可以自己运行看看效果。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hello</title>
<meta http-equiv="Content" "content=text/html; charset=utf-8" />
<script type="text/javascript"
src="jquery-1.5.0-vsdoc.js"></script>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<style type="text/css">
.divFrame {
border:solid 1px #666;
188px;
text-align:center;
}
.divFrame .divTitle {
background-color:#eee;
padding:5px 0px 5px 0px
}
.divFrame .divContent {
padding:5px 0px 5px 0px
}
.divFrame .divContent img {
border:solid 1px #eee;
padding:2px
}
.divFrame .divTip {
position:absolute;
padding:90px 0px 0px 60px;
font-size:13px;
font-weight:bold
}
.btn {
border:#666 1px solid;
padding:2px;
80px;
filter: progid
:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);
}
</style>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
$("img").fadeIn(3000,function(){
$(".divTip").html("淡入成功");
})
})
$("#Button2").click(function(){
$("img").fadeOut(3000,function(){
$(".divTip").html("淡出成功");
})
})
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<input id="Button1" type="button" value="fadeIn" class="btn" />
<input id="Button2" type="button" value="fadeOut" class="btn" />
</div>
<div class="divContent">
<div class="divTip">
</div>
<img src="1.gif" alt="" title="风景图片" />
</div>
</div>
</body>
</html>
