一个简单的待办事项列表 - 完整项目，向下滑动所有项目

Question

tl; dr完成项目后，我希望所有项目和下面的列表都能动画起来并取而代之。

这是我的jsFiddle - http://jsfiddle.net/mattermill/GRFFD/4/

我正在创建一个基本的待办事项列表，以便同时熟悉jQuery和Ruby on Rails。现在我只是在研究jQuery动画。

目前，它由两个列表组成：不完整项和完整项。要完成一个项目，只需单击该项目的文本，它就会淡出并附加到已完成的项目列表中。我希望在fadeOut()发生时，将项目以下所有项目以及已完成的项目列表设置为动画，以取代最近完成的项目。

不幸的是，我甚至不知道从哪里开始。我对nextAll()有点运气，但我不认为这样做是因为它不适用于已完成的项目清单。

Answer 1

恰好在动画时这是（几乎）hide的默认行为;只是改变：

item.fadeOut(300, function() {

要：

item.hide(300, function() {

<强> Try it.

不幸的是，这也会激活左右填充，看起来很糟糕。您可以使用animate显式指定要更改的属性：

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

这看起来是最好的，但它有一个问题：它完成后不会自动删除它的属性。如果您希望在动画完成后重置它们，则必须手动执行：

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

<强> Try it.