Question

我有一个包含2列的表格，当我将宽度设置为66％时，它可以正常工作，但是当我再次为其设置动画时（从66％到66％），它会更大并且会回到66％。

预期结果是保持在66％，因为它已经达到66％。

在下面的示例中，您可以看到每次单击te table时表的大小如何变化。

＆＃13;

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

＆＃13;

table{
  width: 400px;
}

＆＃13;

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

＆＃13;

为什么会这样？

如何解决？

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

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

jQuery动画宽度百分比

2 个答案: