Animation not smooth / appears jerky

Sometimes CSS animations using jQuery can not appear smooth or comes across jerky.

The reason for this is jQuery is animating the height of the container without including the padding that may be being applied.

The very simple solution is to wrap the content with a container that doesn’t have any padding.

Making table rows sortable with jQuery

Making table rows sortable.

.sortable({
  axis: 'y',
  containment: 'parent',
  items: '> tr',
  handle: '.item-order-handle',
  placeholder: 'change-order-placeholder',
  tolerance: 'pointer'
 });
.ui-sortable-helper {
  display: table;
}

Notes

  • Need to explicitly¬†set the column widths in your TD tags (using <col width=”20″> doesn’t pass on to the helper)

References