今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用，当鼠标经过图片列表或是文字列表时悬停当前高亮显示，其它图片列表变暗突出显示鼠标当前悬停。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="pakaerf">
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jfade.js'></script>
<link rel="stylesheet" href="main.css" type="text/css"/>
<script type="text/javascript">
$().ready(function() {
$('.jfade_image').jfade();
$('.portfolio').jfade({
start_opacity: ".4",
high_opacity: "1",
low_opacity: ".2",
timing: "500"
});
$('.button').jfade({
start_opacity: "1",
high_opacity: "1",
low_opacity: ".4",
timing: "500"
});
$('.text').jfade({
start_opacity: "1",
high_opacity: "1",
low_opacity: ".7",
timing: "500"
});
$('.links').jfade({
start_opacity: ".9",
high_opacity: "1",
low_opacity: ".2",
timing: "500"
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>jFade</h1>
<p>jFade is a simple jquery plug-in that lets you highlight items on your website. Not only are customizable fades possible, but easy control of surrounding elements makes your most important content stand out.</p><br />
<h2>Portfolio Gallery</h2><br />
<p>(Fade adjoining objects out)</p>
<div id="images">
<img src="images/card02.jpg" class="jfade_image"/>
<img src="images/card04.jpg" class="jfade_image"/>
<img src="images/card09.jpg" class="jfade_image"/>
<img src="images/card13.jpg" class="jfade_image"/>
<img src="images/card14.jpg" class="jfade_image"/>
<img src="images/card15.jpg" class="jfade_image"/>
<img src="images/card16.jpg" class="jfade_image"/>
<img src="images/card17.jpg" class="jfade_image"/>
</div><br /><br />
<p>To use default settings just add the function </p>
<code><script type="text/javascript"> <br />
$().ready(function() {<br />
$('.jfade_image').jfade();<br />
}); <br />
</script></code><br /><br />
<p>and add the class tag to each element:</p>
<code><img src="images/card02.jpg" class="jfade_image"/><br />
<img src="images/card04.jpg" class="jfade_image"/><br />
<img src="images/card09.jpg" class="jfade_image"/><br />
<img src="images/card13.jpg" class="jfade_image"/><br />
<img src="images/card14.jpg" class="jfade_image"/><br />
<img src="images/card15.jpg" class="jfade_image"/><br />
<img src="images/card16.jpg" class="jfade_image"/><br />
<img src="images/card17.jpg" class="jfade_image"/></code><br /><br />
<p>Custom settings are easily set and explained in the help doc</p><br /><br />
<h2>Portfolio Gallery 2</h2><br />
<p>(Fade objects in)</p>
<div id="images">
<img src="images/card02.jpg" class="portfolio"/>
<img src="images/card04.jpg" class="portfolio"/>
<img src="images/card09.jpg" class="portfolio"/>
<img src="images/card13.jpg" class="portfolio"/>
<img src="images/card14.jpg" class="portfolio"/>