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

时间:2016-02-03 09:29:28

标签: javascript jquery html css animation

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

Full table

点击后它应该动画到左边,这样它就不再完全显示了:

animated

然后再次点击后,它应该再次动画

animated back again

我试图用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>
&#13;
&#13;
&#13;

为什么它不是动画,我该如何解决?谢谢

5 个答案:

答案 0 :(得分:4)

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

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/

答案 1 :(得分:1)

如果你添加更多动画属性,如不透明度,你会看到它的工作原理。所以动画正在发挥作用。

$(".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"
            );  
       }    
   }
);

试试这个,你会看到动画正在运作。

答案 2 :(得分:1)

您必须在表中添加一个修复程序并添加此属性:

  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

答案 3 :(得分:1)

您需要为width not left属性设置动画。 试试这个:

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

答案 4 :(得分:1)

您无法更改 var r: CGFloat = 0 var g: CGFloat = 0 var b: CGFloat = 0 var a: CGFloat = 0 UIColor.randomColor().getRed(&r, green: &g, blue: &b, alpha: &a) print("R: \(r), G: \(g), B: \(g), A: \(g)") 元素的lefttop。尝试使它们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;
}