jQuery 动画 table 单元格宽度百分比

Question

我有一个有 2 列的 table，当我将宽度设置为 66% 时它工作正常，但是当我再次设置它时（从 66% 到 66%）它变大并返回到66%.

预期的结果是保持在66%，因为已经是66%了。

在下面的示例中，您可以看到每次单击 table 时 table 如何更改它的大小。

$(document).ready(function(){
  $('table').click(function(){
    $('.first').animate({'width':'66%'},400);
  });
});

table{
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="first">click</td>
  <td class="secon">me</td>
</tr>
</table>

为什么会这样？

如何解决？

Answer 1

检查当前宽度，仅在宽度不是 66% 时设置动画

$(document).ready(function(){
  $('table').click(function(){
    if($('.first')[0].style.width != '66%'){
        $('.first').animate({'width':'66%'},400);
    }
  });
});

table{
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td class="first">click</td>
  <td class="secon">me</td>
</tr>
</table>

Answer 2

这个解决方案怎么样 -

$(document).ready(function(){
  $('table').click(function(){
    var tableWidth = $(this).width();
    $('.first').animate({'width': (tableWidth * 66 / 100) + 'px'}, 400);
  });
});

演示 URL - https://jsfiddle.net/im4aLL/xpvt214o/64222/

jQuery 动画 table 单元格宽度百分比

jQuery animate table cell width percentage

css

jquery

jquery-animate