一起来写一个简易的手风琴效果

今天我们来写一个基于JQ的手风琴效果。如图：

html部分很简单。

 <div id="main">
    <ul>
      <li class="active">
        <h3>白玫瑰</h3>
        <div></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div></div>
      </li>
      <li class="last">
        <h3>白玫瑰</h3>
        <div></div>
      </li>
    </ul>
  </div>

js：

  <script type="text/javascript">
  $(function() {
    $("#main ul li").click(function() {
      var $this = $(this);
      $this.stop().animate({
        "width": "435px"
      }, 300).siblings().stop().animate({
        "width": "50px"
      }, 300)
    })
  });
  </script>

jq的stop()方法用于停止当前正在运行的动画。想了解更多请猛戳 jQuery 效果 - stop() 方法

jq的animate()方法用于执行 CSS 属性集的自定义动画。是通过css样式将元素从一个状态改变为另一个状态。通过css值的改变来创造动画效果。
tips：animate()方法只能通过数字值创建动画，如上述demo的写法，不能通过字符串值。
语法实例：

$(selector).animate(styles,speed,easing,callback)

$(selector).animate(styles,options)

想了解更多请猛戳 jQuery 效果 - animate() 方法