Web Design Leaves

jQuery の position(), animate() メソッドを使用する際のメモ。

画像などを最初は非表示にしてその後表示するような場合、css の display プロパティを「none」にしておいて fadeIn() や show() などを使うことで可能だが、animate() メソッドの場合、css の display プロパティを「none」にしてあるとその対象の要素が見えていないためか機能しない。（要素自体はあるので、length などではカウントされる）

また、position() メソッドも display プロパティを「none」にしてある場合、返されるプロパティ（left や top など）の値は「0」。

画像などを最初は非表示にしてその後表示するようなことを、position() や animate() を使用して行うには、 display プロパティではなく、opacity プロパティを「0」にしておくか、position() などの場合は、可能であればまず、position() で値を取得してその後 display プロパティを「none」にする。

$('img').css('opacity', 0).animate({opacity: 1.0}, 1000);    //これはOK

$('img').css('display', 'none').animate({opacity: 1.0}, 1000);   //これは表示されない

$('img').css('display', 'none').fadeIn(1000);    //これはOK