動畫表格列以隱藏/顯示它

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/

Answer 2

如果你添加更多動畫屬性，如不透明度，你會發現它的工作原理。 所以動畫正在發揮作用

$(".test").click
(
   function()
   {
      if ($boolean)
      {
         $boolean = false;
         $(".test").animate
         (
            {  opacity: 0.5,
               'left':'-=100px'
            },
            "fast"
         );  
       }
       else
       {
            $boolean = true;
            $(".test").animate
            (
                {   opacity: 0.25,
                    'left':'+=100px'
                },
                "fast"
            );  
       }    
   }
);

試試這個，你會看到動畫工作。

Answer 3

您必須在表中添加一個修復程序並添加此屬性：

  table-layout: fixed;
  width:200px;

然后你可以使用這個javascript：

var main = function()
{
    $boolean = true;

      $(".test").click(function(){
                if($boolean){
              $boolean = false;
              $( ".test" ).animate({ 
                  width:"20px",
                }, 1500 );
             } else {
                    $boolean = true;
                $( ".test" ).animate({ 
                  width:"100px",
                }, 1500 );
             }
      });
}
$(document).ready(main);

你可以看到Jsfiddle

Answer 4

您需要為寬度而不是左側屬性設置動畫。 試試這個：

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

另外你應該改變.test的css，如下所示：

.test {
  color: red;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

Answer 5

您無法更改position: static left或top position: static元素。 嘗試使它們保持relative位置以保持其真實位置。

 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; position: relative; } 

 <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>