手风琴效果

调用jQuery的animate动画函数，能实现动画变形，以此实现动画效果。

 window.onload = function () {
            //需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，回复原样。
            //步骤：
            //1.给li添加背景
            //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
            //3.移开大盒子，回复原样


            var div = document.getElementsByTagName("div")[0];
            var liArr = div.getElementsByTagName("li");
            //1.给li添加背景
            for(var i=0;i<liArr.length;i++){
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";

                //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
                liArr[i].onmouseover = function () {
                    //排他思想
                    for(var j=0;j<liArr.length;j++){
                        //引用框架实现宽度变窄
                        animate(liArr[j],{"width":100});
                    }
                    //剩下他自己
                    animate(this,{"width":800})
                }
            }

            //3.移开大盒子，回复原样
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
        }

思路：

调用JS的for循环为每个li节点增加背景图片属性，并且为该li节点绑定一个onmouseover方法，在方法中先用for循环将所有元素遍历一遍，width设为100，之后将自己的width设为800，便能实现手风琴效果。

 鼠标移开，用mouseout方法检测到，再用for循环遍历，将所有宽度设为正常值。