用jQuery動畫表格

昨天在這裏問了一個問題，得到了一些幫助，但我需要更多或更少的幫助，只是有點不同。用jQuery動畫表格

This是我的老話題。

所以你們，我做了這個，想法是，你可以自定義表格，以你想要的方式看到它。現在可以拖動列來改變順序，並且可以按字母順序或高/低順序排列。既然我在這裏得到了幫助，現在也可以隱藏這些列。

現在我想讓隱藏過程更加流暢，因爲如果您不使用動畫，很難看出點擊後是否隱藏了某些內容。我使用.fadeOut（200）;現在，但是當淡出完成時，該列只是「跳躍」以填補空白，是否有可能以某種方式對此進行動畫製作？

編輯：思考一些後，我認爲我可以循環-1px寬度，直到元素的寬度爲1px，然後只是隱藏它，但由於某種原因，不會工作，表不響應。 XXX）;或.css（'width'，'xxx'）;.它確實改變了值，但td保持相同的寬度。

來源

2012-01-03 Gideon

將時間從'200'減少到'100' – diEcho 2012-01-03 09:25:48

這是一種解決方法有點的，有可能是一個更好的解決方案，但在這裏它是無論如何：

將不透明度設置爲0.0。 Fadeout也是如此，但它在完全消失後也會設置display:none。這是display:none，導致相鄰的列跳躍並填補空白。
動畫會導致您的隱藏div保持在那裏。現在它不再可見，將其寬度設置爲0.這將導致相鄰的div順利地佔據它的位置。
一旦寬度爲0，設置display:none

下面是我颳起了工作樣品。相應地調整動畫寬度：http://jsfiddle.net/x7BEv/8/

這裏的魔法是如何發生的：

$(document).ready(function(){ 
    $('#button').click(function(){ 
     $('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone); 
    }); 
}); 

function allDone() 
{ 
    $('#upper').hide(); 
}

我不知道該allDone()方法是多麼重要。你可能會放棄它。

來源

2012-01-03 09:25:19 xbonez

剛剛對此進行了編輯，我需要輸入更快。：p但是，你似乎是個好主意，但是如何將寬度設置爲0？正如我所說，我嘗試循環但無效。 – Gideon 2012-01-03 09:27:44

@Gideon：參見編輯 – xbonez 2012-01-03 09:35:56

我試過了，但它不起作用，至少沒有我認爲的表格。不錯的網站btw，只是做了一件事：http://jsfiddle.net/Gideonnn/ePvxL/事情是，它在那裏有點不錯，但是如果我在我的網站上使用完全一樣的東西，那麼這個東西不起作用。 – Gideon 2012-01-03 09:59:08

必須使用jqgrid

或只是進行排序，您可以使用tablesorter這是非常容易實現

來源

2012-01-03 09:18:55 diEcho

我已經有2種導入的庫（拖拽和排序）以及它只是一個小項目，我會像一個小型解決方案。我的問題是隱藏整列，而不是整列。 – Gideon 2012-01-03 09:22:54

用jQuery動畫表格

回答

相關問題