效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种Accordion效果，看似简单，但因为存在动画同步的问题，不能简单地用两个animate()来实现。必须把它做成一个不断循环判断执行的动画。
演示地址：http://frontendcode.sinaapp.com/J-Lui/jQuery-jLaccordion-plugin/
js/jquery.jLaccordion.js：
;(function($){
$.fn.extend({
"jLaccordion":function(){
var timer = null;
var $aLi = $(this).find("ul li"); //获取li标签列表对象
var $aSpan = $(this).find("ul li").eq(0).find("span"); //获取一个span标签对象
var liWidth = $(this).find("ul li").eq(0).width(); //获取展开后li标签的宽度
var spanWidth = $aSpan.width() + parseInt($aSpan.css("borderRightWidth").replace("px","")); //获取span标签的宽度（包括有边框） $aLi.mouseover(function(){
var $thisObj = $(this); //存储鼠标当前所在li对象
clearInterval(timer); //清理定时器
timer = setInterval(function(){ //设置定时器，每隔30毫秒对每一个li对象进行判断操作
for(var i = 0; i < $aLi.length; i++){ if($thisObj.width() == liWidth){ //如果鼠标移动到已完全展开的li对象上，则不用进行计算和判断操作
break;
}
/* 缓冲算法，speed终将变成0 ，所有循环执行完之后的speed之和必将等于当前下标li的移动距离 */
var speed = ($aLi.eq(i).width() - spanWidth)/5; //计算当前下标li对象在该次循环中的移动距离
speed = Math.ceil(speed);
if($aLi.eq(i).width() > spanWidth){
$aLi.eq(i).width($aLi.eq(i).width() - speed);
$thisObj.width($thisObj.width() + speed);
}
if($thisObj.width() == liWidth && speed == 0){
clearInterval(timer);
} }
},30);
});
}
})
})(jQuery);
index.html：
<!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=utf-8" />
<title>jQuery手风琴广告展示插件</title>
<link href="css/style.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jLaccordion.js"></script>
<script type="text/javascript">$(document).ready(function(){ $("#show1").jLaccordion();});
</script>
</head>
<body>
<div id="show1">
<ul>
<li class="active">
<span class="bg0">第一个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic1.png" /></a>
</li>
<li>
<span class="bg1">第二个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic2.png" /></a>
</li>
<li>
<span class="bg2">第三个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic3.png" /></a>
</li>
<li>
<span class="bg3">第四个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic4.png" /></a>
</li>
<li>
<span class="bg2">第五个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic5.png" /></a>
</li>
<li>
<span class="bg3">第六个广告标题</span>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="data:images/pic6.png" /></a>
</li>
</ul>
</div>
</body>
</html>
css/style.css：
省略
