画像ギャラリーを作成しており、クリック時にメニューを展開する各要素に追加したいと考えています。
iTunes 11 のアルバム表示効果を再現したい。
HTML順序なしリストを使用して、画像をグリッドとして配置します
<ul>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
<li><div class="box"></div></li>
...
<li><div class="box"></div></li>
<li class="clear"></li>
</ul>
次に、jQuery を使用して、li 要素をクリックするとトリガーされる関数を作成し、その別の div に追加し、この div にメニューをロードします。
$("li").click( function() {
$(this).append("<div class='container'></div>");
var cont = $(".container", $(this));
cont.html("<div class='menu'><div class='content'></div></div>");
var item_height = $(this).outerHeight();
var cont_height = $(".content", cont).outerHeight();
$(".content", cont).css({ height:0 });
$(".content", cont).stop().animate({ height: cont_height + "px" });
$(this).css({height: (item_height+cont_height) + "px"});
} );
そして、主な問題は、li 要素をクリックすると「iTunes 効果」が機能しないことです。メニューは表示されますが、アニメーションは表示されず、さらに進むとレイアウト全体が壊れます。
デモ: http://jsfiddle.net/puz219/VmrEG/
アニメーションとレイアウト自体を修正する方法はありますか。