分享今天封装的一个简单的jq方法-手风琴

嘛，还是先上代码：

js文件：

$.fn.accordion = function (width) {
    var $li = this.find('li');
    $li.each(function (index,ele) {
        $(ele).css('background','url("images/'+(index+1)+'.jpg")');
    })

    //获取并计算相关的宽度
    var allLength = this.width();
    var maxLength = allLength - ($li.length-1)*width;
    var avgLength = allLength/$li.length;

    $li.mouseenter(function () {
        $(this).stop().animate({width:maxLength}).siblings().stop().animate({width:width});
    })
    $li.mouseleave(function () {
        $li.stop().animate({width:avgLength});
    })
}

css文件（仅供参考）：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
div{
    width: 1200px;
    height: 400px;
    border: 1px solid greenyellow;
    overflow: hidden;
}
div ul {
    width: 1300px;
}
li{
    width: 240px;
    height: 400px;
    float: left;
}

html部分（仅供参考）：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>