一個簡單的待辦事項清單 - 完整的項目，向上滑動所有項目

tl; dr完成一個項目後，我想要所有項目和下面的列表動畫並將其放置。一個簡單的待辦事項清單 - 完整的項目，向上滑動所有項目

我創建一個基本的待辦事項列表在同一時間使用jQuery和Ruby on Rails的熟悉自己。現在我只是在研究jQuery動畫。

目前它由兩個列表組成：未完成項目和完成項目。要完成一個項目，只需單擊該項目的文本，它就會淡出並附加到完成的項目列表中。我希望所有物品低於該物品以及已完成物品清單，在正在發生時動畫以代替最近完成的物品。

不幸的是，我甚至不知道從哪裏開始。我對nextAll()有一點點運氣，但是我不認爲這是這種方式，因爲它不適用於已完成的項目列表。

2013-03-28 mattermill

恰好在動畫時這（幾乎）是hide的默認行爲;只是改變：

item.fadeOut(300, function() {

要：

item.hide(300, function() {

不幸的是，這也將動畫左右填充，這很糟糕。您可以使用animate明確指定要更改的屬性：

item.animate({height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0}, 300, function() {

這看起來最好了所有的人，但它有一個問題：它的時候，它的完成不會自動刪除其屬性。如果你希望他們重置一次的動畫完成，你必須這樣做手工：

item.css({height: '', opacity: '', paddingTop: '', paddingBottom: '');

2013-03-28 01:34:42 icktoofay

謝謝！對於用於UX的目的，我想在將它移動到底部之前顯示該項目正在完成，因此我稍微修改了它以獲得更清晰的結果。 [看這裏]（http://jsfiddle.net/mattermill/GRFFD/27/） – mattermill

@mattermill：由於動畫隊列，你[可以減少回調的嵌套量]（http://jsfiddle.net/GRFFD/28 /）。 – icktoofay

注意，再次感謝:) – mattermill

回答