Question

我有一个表格，可以选择展开/撤消列。使用JQuery UI切换幻灯片我有它所以它'滑入'进出。然而，当点击按钮时，它不是一个非常平滑的过渡并且看起来非常糟糕。

这是我正在使用的基本版本，即使在这里你也可以看到一些口吃，当你添加表格边框时，这一点就更加明显了。

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

这是一个看起来很像的小提琴手： http://jsfiddle.net/LhsS4/10/

一般情况下，我会尝试避免使用表格进行布局，表格已经删除（除非您在电子邮件中发送它，在这种情况下，表格是布局的表格）。如果需要表，请尝试使用display属性。

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

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

祝你好运！：）

JQuery UI平滑列动画

1 个答案: