0

tl;dr 完成一个项目后,我希望所有项目和下面的列表动画化并取代它。

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

我正在创建一个基本的待办事项列表,以同时让自己熟悉 jQuery 和 Ruby on Rails。现在我只是在处理 jQuery 动画。

目前它由两个列表组成:不完整的项目完整的项目。要完成一个项目,您只需单击该项目的文本,它会淡出并将自身附加到已完成的项目列表中。我想让该项目下方的所有项目以及已完成的项目列表进行动画处理,以在发生时取代最近完成的项目fadeOut()

不幸的是,我什至不知道从哪里开始。我有一点运气,nextAll()但我不认为这是解决这个问题的方法,因为它不适用于已完成的项目列表。

4

1 回答 1

1

碰巧这(几乎)是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-28T01:34:42.337 回答