JS中jq实现手风琴图片展示

4张图片在一个盒子中展示，鼠标移入哪一张图片，该图片便展开显示，其他图片折叠；
鼠标移出后四张图片平分黑子宽度

// 手风琴
// ul宽度640,鼠标移出的效果是每张图片width=160
// 鼠标移入li,该liwidth=520,其他liwidth=(640-520)/3=40
$('ul>li').hover(function(){
  // 鼠标移入
  // $(this).css('width',520).siblings().css('width',40)
  // 向将其他liwidth=40
  // 为了防止多次触发,图片一直在移动,鼠标移入后结束所有li动画
  $('ul>li').stop()
  $(this).siblings().animate({width:40})
  .end() //回到鼠标下的li
  .animate({width:520})
},function(){
  // 鼠标移出
  // $('ul>li').css('width',160)
  $('ul>li').stop()
  $(this).animate({width:160}).siblings().animate({width:160})
})