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平滑列動畫

回答

相關問題