CODEWITHSUNDEEP
jquerycssjquery-animate
stramin
stramin

Reputation: 2390

jQuery animate table cell width percentage

I have a table with 2 columns, when I animate the width to 66% it works fine, but when I animate it again (from 66% to 66%) it goes bigger and goes back to 66%.

The expected result is to keep at 66%, because it is already at 66%.

In the following example you can see how table change it size every time you click the 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>

Why does this happen?

How to solve it?

Upvotes: 1

Views: 1160

Answers (2)

Hadi
Hadi

Reputation: 2905

How about this solution - 

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

Demo URL - https://jsfiddle.net/im4aLL/xpvt214o/64222/

Upvotes: 1

Dumisani
Dumisani

Reputation: 3038

Do a check on the current width and only animate when it's not 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>

Upvotes: 1

Related Questions