jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
<html>
<head>
<meta charset="utf-8">
<title>精品展示案例</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}
#context{
width: 300px;
height: 270px;
border: 1px pink solid;
margin: 10px auto;
overflow: hidden;
}
#left{
width: 80px;
float: left;
}
#right{
width: 200px;
float: right;
margin-right: 10px;
margin-block: 10px;
}
#left ul li a{
display: inline-block;
width: 80px;
height: 28px;
text-align: center;
line-height: 28px;
font-family: "楷体";
font-size: 16px;
font-weight: bold;
color: chartreuse;
background-color: bisque;
border:1px lightpink solid;
}
#left ul li a:hover{
background-color: azure;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$(" #left>ul li").mouseover(function(){
var index=$(this).index();
$("#right>ul li:eq("+index+")").fadeIn().siblings().hide();
})
});
</script>
</head>
<body>
<div id="context">
<div id="left">
<ul>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">女靴</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">雪地靴</a></li>
</ul>
</div>
<div id="right">
<ul >
<li><img src="img/冬裙.jpg" /></li>
<li><img src="img/呢大衣.jpg"/></li>
<li><img src="img/女裤.jpg"/></li>
<li><img src="img/女靴.jpg"/></li>
<li><img src="img/棉服.jpg"/></li>
<li><img src="img/毛衣.jpg"/></li>
<li><img src="img/牛仔裤.jpg"/></li>
<li><img src="img/羽绒服.jpg"/></li>
<li><img src="img/雪地靴.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>效果图
