用jquery封裝的手風琴特效插件

      這裡隻提供了jquery封裝的代碼段，至于HTML中的結構和元素樣式不在此列出，本代碼段隻起到一個手風琴特效封裝原理的參考作用。

;(function ($) {
  $.fn.extend({
    //傳參：傳的是背景色數組和手風琴發生效果後的其他li的寬度
    'accordition': function (colors, width) {
      colors = colors || [];
      width = width || ;
      //下面這個this指代調用這個方法的jquery對象，是以不用加$
      var $li = this.find('li');

      var $boxLength = this.width();
      var $maxLength = $boxLength - ($li.length - ) * 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);