0

tl;dr アイテムを完成させた後、すべてのアイテムと以下のリストをアニメーション化して配置したいと思います。

これが私のjsFiddleです - http://jsfiddle.net/mattermill/GRFFD/4/

jQuery と Ruby on Rails に同時に慣れるために、基本的な To Do リストを作成しています。今のところ、私は jQuery アニメーションに取り組んでいます。

現在、不完全なアイテム完全なアイテムの 2 つのリストで構成されています。アイテムを完了するには、そのアイテムのテキストをクリックするだけで、テキストがフェードアウトし、完了したアイテム リストに追加されます。そのアイテムの下にあるすべてのアイテムと、完了したアイテムのリストをアニメーション化して、発生中に最近完了したアイテムの代わりにしたいと考えてい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 に答える