0

必要に応じて、これをフィドルに投げ込むことができます。現時点では、かなり複雑なコードです。ここに私の問題があります: いくつかの動的な画像とテキスト コンテンツのためにサイズ変更される子 div と、全体の周りに素敵な境界線を与えるコンテナーの親があります。親には自動の高さがある (または高さがない?) ため、子の高さと一緒に流れます。問題は、子の高さを変更すると、コンテンツをフェードアウトしてから元に戻すため、有効な高さが 12px (いくつかの境界線が続く) になることです。親のサイズが 12 に変更され、子コンテンツが再びフェードインすると、親は正しい位置に移動します。このプロセスは 100 ミリ秒程度のスパンで展開されるため、途切れ途切れに見えます。このプロセスをアニメーション化する方法はありますか? 理想的には、次のようなものを探していると思います

値を指定する必要がない content.startAnimation と endAnimation。

4

1 に答える 1

0

だから私は解決策を思いつきました。基本的に、私の #content div はフローティングだったので、その親 (#content) よりも高い高さを持つ #ghostWrapper div を内部に配置することができました。私の #ghostWrapper はもちろん見えませんでした。私はこのonClickから始めます：

// set content height on load
var contentHeight = $("#content").css("height");
$("#content").css("height", contentHeight);

次に、#ghostWrapper 内のコンテンツの高さが自動調整されたら、#content の高さを #ghostWrapper に等しく設定します

// get ghostWrapper height and set content to it
var ghostHeight = $("#ghostWrapper").css("height");
$("#content").css("height", ghostHeight);

また、CSS では高さを .2s トランジションとして使用しているため、シームレスに調整されます。これが、将来同じ問題を抱えている他の人に役立つことを願っています。

于 2012-10-11T19:07:41.107 に答える