前端 jQuery 带侧边栏的手风琴效果实现 不挤压宽度 例天刀官网主页手风琴模块

之前因练手要写一个游戏页面,写到手风琴的部分的时候,发现这个手风琴的结构较为复杂,是好几个div层层嵌套的一个模块,这样就不能改变他的宽度.也就无法使用简单的挤压宽度来实现效果.
效果图就是天涯明月刀官网主页的http://wuxia.qq.com/main.shtml 同人部分就是我要实现的效果可以去右键查看一下每个元素的结构
js代码如下

    $(window).ready(function (){
    function trq(){
    var jsonArr0 = [{"background-positionX":0},{"background-positionX":-340},{"background-positionX":-136},{"background-positionX":-204},{"background-positionX":-68},{"background-positionX":-272}]//侧边栏精灵图位置
    var jsonArr1= [{"left":0},{"left":68},{"left":136},{"left":204},{"left":272},{"left":340}]//每个模块的初始位置
    var jsonArr2 = [{"left":392},{"left":460},{"left":528},{"left":596},{"left":664},{"left":732}]//每个模块滑动之后的位置
    var ul = $(".trquan>ul");  //获取模块列表
    var piclist = $(".trquan .trpic"); //获取侧边栏列表
    piclist.on("click",function (){
        var lq =$(this).parent().parents("ul").prevAll().length;//获取被点击元素之前所有元素的个数
        var px = parseInt($(this).css("background-positionX")); 
        /*因为侧边栏是一个整体的雪碧图,所以我用改变positionX的方式来改变它的状态,因为点击之后再点击的话会有一个bug就是侧边栏会消失,因为他的positionX会在二次点击的时候继续改变,所以就要加一个判断了*/
               if(px+408>0){
            piclist.each(function (index,element){
            $(element).animate(jsonArr0[index],0);
        })//将它的全部元素都用each遍历一次改变到初始状态
        $(this).css("background-positionX",px-408);
        //改变被点击的元素的状态
        $(this).parent().parent().animate(jsonArr1[lq],500);

        $(this).parent().parent().prevAll().each(function (index,element){
            $(element).animate(jsonArr1[lq-index-1],500);
        })
        //逻辑就是将之前的元素改变到初始的状态   

        $(this).parent().parent().nextAll().each(function (index,element){
            $(element).animate(jsonArr2[lq+1+index],500);
        })
        //然后将之后的元素集体的往后移动
        }

    })
    }
    trq();//执行函数
})

因为我的代码获取的元素跟网站上的类名有出入,并不好对照着看.
但是重点讲的是逻辑, 即将点击之前的元素初始化, 将点击元素之后的所有元素进行位移,而不改变他们的宽度
我使用到的jQuery方法有.prevAll()获取该元素节点之前的所有元素,返回值是个数组.nextAll()获取该元素节点之后的所有元素,返回值是个数组
.parent()获取该节点的父元素
.each()将该数组里面的所有元素进行遍历,可以加函数进行操作
然后就是使用获取到的之前元素的长度跟定义好的三个json里的index进行关系对应然后进行操作.