javascript - 动画表格列以隐藏/显示它

Question

我有一个非常简单的表格，如果我按下它，我会尝试为第一列设置动画。

点击后它应该向左移动，这样它就不会再完全显示了:

然后再点击一次，它应该再次动画回来

我试图用 jquery 实现这个，但没有任何反应:

var main = function()
{
    $boolean = true;
    
    $(".test").click
    (
       function()
       {
          if ($boolean)
      	  {
             $boolean = false;
             $(".test").animate
             (
                {
                   'left':'-=100px'
                },
                "fast"
             );  
           }
      	   else
      	   {
                $boolean = true;
                $(".test").animate
                (
                    {
                        'left':'+=100px'
                    },
                    "fast"
                );  
           }    
       }
  );
}
$(document).ready(main);

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
</table>

为什么它没有动画，我该如何解决？谢谢

Answer 1

这是一个有效的解决方案:

var main = function()
{
    $boolean = true;
    
    $(".test").click
    (
       function()
       {
          if ($boolean)
      	  {
             $boolean = false;
             $(".test").animate
             (
                {
                   'max-width':'10px'
                },
                "fast"
             );  
           }
      	   else
      	   {
                $boolean = true;
                $(".test").animate
                (
                    {
                        'max-width':'300px'
                    },
                    "fast"
                );  
           }    
       }
  );
}
$(document).ready(main);

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

table th {
  border: 1px solid black;
}

.test {
    color: red;
    overflow: hidden;
    max-width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
  <th class="test">Filename</th>
  <th>value</th>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
<tr>
  <td class="test">File1</td>
  <td>Test</td>
</tr>
</table>

https://jsfiddle.net/zcb0a9tz/