jQueryにて、appendを用いて挿入したコンテンツにfadeInアニメーションを付加したい場合と、逆にremoveを用いて削除したコンテンツにfadeOutアニメーションを付加したいときに、適当に書いたら期待通りに動かなかったのでメモ。

大した内容じゃないけど、初めてやったらたぶん引っかかる人多いはず。

間違った記述方法

append() + fadeIn()

これだとid/classの要素すべてがhideしてfadeInしてしまう。リストであればすべてが一瞬消えてfadeInする。

remove() + fadeOut()

これだと上手く動かない。fadeOutせずに一瞬で要素が削除されてしまう。

正しい記述方法

append() + fadeIn()

これなら追加した要素だけがfadeInする。

remove() + fadeOut()

jQueryのfadeOutイベントは【fadeOut([speed], [callback])】なので、callbackにfunctionとしてremove()を挿入すると上手く動く。
大した長さでもないので、一行にしたほうが見やすいかも。

仕事そっちのけで記事を書いた人

プログラムしたりトレードしたりスケートしたりけん玉したりするひと。趣味はトライアンドエラー。優しいときもあれば厳しいときもある。寝不足を基本とする。

Comment

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。