用jquery封装的手风琴特效插件

      这里只提供了jquery封装的代码段，至于HTML中的结构和元素样式不在此列出，本代码段只起到一个手风琴特效封装原理的参考作用。

;(function ($) {
  $.fn.extend({
    //传参：传的是背景色数组和手风琴发生效果后的其他li的宽度
    'accordition': function (colors, width) {
      colors = colors || [];
      width = width || 0;
      //下面这个this指代调用这个方法的jquery对象，所以不用加$
      var $li = this.find('li');

      var $boxLength = this.width();
      var $maxLength = $boxLength - ($li.length - 1) * width;
      var $aveLength = $boxLength / $li.length;

      //更改li的颜色
      $li.each(function (i, e) {
        $(e).css('backgroundColor', colors[i]);
      });

      //给li注册鼠标悬停事件
      $li.on('mouseenter', function () {
        $(this).stop().animate({width: $maxLength}).siblings().stop().animate({width: width});
      });

      //给li注册鼠标离开事件
      $li.on('mouseleave', function () {
        $li.stop().animate({width: $aveLength});
      });
    }
  })
})(jQuery);