animation之 左侧出入的弹出框

HTML如下： 

    <div class="toolbar">
    收起
    </div>
    <div class="infolist">
        <ul>
            <li>
                <label>操作系统：</label>
                <span>未知</span>
            </li>
            <li>
                <label>开发语言：</label>
                <span>未知</span>
            </li>
            <li>
                <label>CDN：</label>
                <span>未知</span>
            </li>
            <li>
                <label>WAF：</label>
                <span>未知</span>
            </li>
        </ul>
    </div> 

CSS代码如下： 

  .infolist{
      position: absolute;
      left: 24px;
      bottom: 20px;
      width: 520px;
      height: 360px;
      background-color: #d8e1e4;
      border-radius: 4px;
      padding: 20px;
      padding-bottom: 0;
      box-sizing: border-box;
      font-size: 12px;
      color: #333;
      font-weight: 700;
      opacity: 0.5;
  }
  .infolist label{
    color: #333;
    font-weight: 700;
  }
  .toolbar{
    padding: 20px 2px;
    position: fixed;
    left: 0px;
    bottom: 150px;
    width: 20px;
    height: 100px;
    background-color: #d8e1e4;
    border-radius: 4px;
  } 

 

JS代码如下： 

    // 给查看按钮绑定点击事件
  $('.toolbar').on('click',function(){
    if($(this).text()=="查看"){
      $('.infolist').animate({
          'left':'24px'
      },800);
      $(this).text('收起')
    }else{
      $('.infolist').animate({
          'left':'-1000px'
      },800);
      $(this).text('查看')
    }

    })