效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种Accordion效果，看似简单，但因为存在动画同步的问题，不能简单地用两个animate()来实现。必须把它做成一个不断循环判断执行的动画。

演示地址：

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：

     
     
     
    
      
        
       
            第一个广告标题                    
        
       
            第二个广告标题                    
        
       
            第三个广告标题                    
        
       
            第四个广告标题                    
        
       
            第五个广告标题                    
        
       
            第六个广告标题                    
    
      
     

css/style.css：

省略