jQueryのアニメーション利用時の不具合解消メモ

jQueryでは簡単にアニメーションが出来るようになっている。
$('#hoge').fadeOut('slow');などとすると、#hogeはフェードアウト効果を得ることができる。

これ、とても便利なのだけど、Firebugなんかでよく見ると、途中でタグにインラインで「display: block;」が入るのだ。要はブロック要素に一瞬変えている。
例えば、インライン要素にフェード効果を与えようとするとぽこっと一段落ちるということになる。
なんで途中でブロック要素に変えないといけないのだろう?ウーム…。

というわけで、ちょっとjQueryのソースに手を入れる。

コンパイルされたものを使っているので、何行目とか言えない。ちなみにver1.2.1は不具合が多いので、今回はver1.1.4をいじっています。

curAnim|try|block|cssFloat

このコードを検索して、blockのところをinlineに変えたらOK。

他に影響が出ないかは・・・保証できません。(今のところ問題なさそう)

関係ないが、2週間もエントリーしていなかったことに自分自身で驚いた…。

  • コメント(2)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Comments

1:cyokodog 2008年11月28日 13:47

>該当するブロック要素内にDOMでオブジェクトが増えることによる高さの変化には対応できておらず、やがてはみ出すことに。
高さを揃える時にmin-heightを使用しても駄目でしょうか?
↓こちらのプラグインはそんな実装になってますが・・
http://ascii.jp/elem/000/000/189/189994/

2:2008年11月28日 20:44

>>cyokodogさん
コメントありがとうございます。
コメントをつけるエントリーが間違っていませんか?
ブロック要素を揃えたい(http://www.blurblue.com/2007/11/post_20.html)
へのレスかと思いますが、ご紹介いただいたプラグインは存じませんでした。
折を見て試してみたいと思います。
ありがとうございました。

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読