javascript - 两个 td 标签不能并排滑动

Question

你好，我开发了一个应用程序，其中 td 并排出现和消失。

lastInsertTd = 0;
function newSlidingTd() {
  tr = jQuery('#myline');
  var lastTd = jQuery('#myline').children().last();

    td = jQuery("<td></td>")
      .attr('id', 'slidingTd' + lastInsertTd+1)
      .attr('style', 'display:none;vertical-align:top;width:100%');
    tr.append(td);
    tdSuivant = jQuery('#slidingTd' + lastInsertTd+1);
    tdActuel = jQuery('#slidingTd' + lastInsertTd);

  /*animation*/
    tdActuel.toggle('slide', {
      direction: 'left'
    }, 500);
    tdSuivant.toggle('slide', {
      direction: 'right'
    }, 500);
lastInsertTd = lastInsertTd+1;
}

table {
  width:100px
}
td {
  border: black solid 1px;
  width:100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<table>
  <tr id="myline">
    <td id='slidingTd0' onclick="newSlidingTd()">
      1
    </td>
  </tr>
</table>

但是当我调用我的事件时，我的新 td 并没有从右边滑动而是稍微低了一点。我该如何解决这个“错误”？ (当我在 td 中创建 div 时也会发生这种情况)

Answer 1

如果它稍微低一点，那么很可能是显示空格的问题。

尝试设置 line-height: 0;在父元素中(我猜是 tr)，或者删除 < /td >< td > 之间的空格