JQuery UI平滑列动画

我有一个表可以选择展开/收回列。使用JQuery UI切换幻灯片我拥有它，因此它“滑入”和滑出。然而，它不是一个非常平稳的过渡，并且当点击按钮时看起来非常糟糕。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>

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

来源

2014-02-06 Hulaz

这是因为你隐藏''。我会表现完美的divs。 – Era

是的，我想到了很多 - 我有大的div部分类似的操作工作正常，我希望会有一些聪明的解决方法来加载边框或文本之后可能 – Hulaz

我最终做的是，而不是滑动或只是切换出现使用'FadeIn'，它看起来更自然。 – Hulaz

一般来说，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/

而在一般我会尽量避免一个表布局，表都出来了（除非你在电子邮件中发送它哪些布局案例表是最佳选择）。如果您需要表格，请尝试使用显示属性。

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

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

祝您好运！ :)

来源

2014-02-06 12:59:56

感谢您的评论，我已经使用Jquery UI，看起来没有太多我可以做的除了让他们只是'出现'，不理想，但比见证那些可怕的动画更好。我从来没有使用CSS表（认为HTML是结构和CSS是风格），但我必须看看它！谢谢 – Hulaz

JQuery UI平滑列动画

回答

相关问题