次の例は、タイル化された div を示しています。クリックするとフェードアウトします。これを拡張して、div の代わりに子 img が削除されるようにしました。
これが発生すると、div は CSS で定義された幅と高さを失い、グリッドが壊れます。
display none を使用して grid layout を維持する JQuery UI エフェクトを使用して画像をアニメーション化する方法を知っている人はいますか?
http://jsfiddle.net/bzCbh/4/ - 実例
ありがとう
タイルはdisplay:inline、上記の要素の高さと幅を無視するように設定されます。したがって、画像が削除されるとそれらが崩壊するのは当然であり、高さと幅はそもそもdivによって尊重されませんでした。それらをに変更するとdisplay:inline-block、機能します。
.layer .tile { ... display:inline-block; ...}
display:blockまた、一貫して動作するように画像を変更する必要があります
.layer .tile img { display:block; }
ワーキングフィドル： http： //jsfiddle.net/bzCbh/7/