javascript - JQuery UI 平滑列动画

Question

我有一个表格，可以选择展开/缩回一列。使用 JQuery UI Toggle slide 我有它所以它“滑入”和“滑出”。然而，这不是一个非常平滑的过渡，并且在单击按钮时看起来很糟糕。

这是 JS fiddle http://jsfiddle.net/LhsS4/

这是我正在使用的基本版本，即使在这个版本中你也能看到一些卡顿，当你添加表格边框时，这会变得更加明显。

这是JQ

$(function () {
    $('.toggleoff').hide;
    $('.newtoggle').on('click', function () {
        $('.toggleoff').toggle("drop", 250);
    });
});

这是 HTML

<button class ="newtoggle" alt="Expand"> Click me </button>     

<table id="tblMainData" class="tablesorter">
                    <thead>
                       <tr>
                          <th>1</th>
                          <th>2</th>
                          <th>3</th>
                          <th>4</th>
                          <th>5</th>
                          <th>6</th>
                          <th class="toggleoff">7</th>
                          <th>8</th>
                       </tr>
                    </thead>
                    <tbody>
                       <tr>
                          <td>a</td>
                          <td>b</td>
                          <td>c</td>
                          <td>d</td>
                          <td>e</td>
                          <td>f</td>
                          <td class="toggleoff">g</td>
                          <td>h</td>
                       </tr>
                       <tr>
                          <td>i</td>
                          <td>j</td>
                          <td>k</td>
                          <td>l</td>
                          <td>m</td>
                          <td>n</td>
                          <td class="toggleoff">o</td>
                          <td>p</td>
                       </tr>       
        </tbody>
                 </table>

我已尝试调整过渡速度，但这仍然无法解决问题。我认为主要问题是当它切换时，表数据字段边框不会滑入，它们会以倾斜的方式出现，直到数据停止。有什么方法可以平滑它吗？

Answer 1

一般来说，jquery-ui 在动画方面做得更好。 http://api.jqueryui.com/slide-effect/

如果您将 jQuery UI 添加到您的代码中，您将获得比使用标准 jQuery 切换功能更好的效果。

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

这是一个 fiddler 的样子: http://jsfiddle.net/LhsS4/10/

一般来说，我会尽量避免使用表格进行布局，表格已经过时(除非您通过电子邮件发送，在这种情况下，表格布局是可行的)。 如果您需要表格，请尝试使用显示属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/display

http://www.vanseodesign.com/css/tables/

祝你好运! :)