jQueryのDIVの高さの問題
-
11-09-2019 - |
質問
良い一日:)
私は、固定サイズのdivに、不透明度と高さの両方に)(jQueryのアニメーションを使用しています。
それはすべての罰金とFirefoxでダンディ動作しますが、IE8で(ととの互換性モードなしで、私はそれがIE6とIE7で同じ動作を持つことになりますと仮定しています)、アニメーションがショーを行いますが、divの高さが0%に達したときに、 div要素の高さは、そのdiv要素の内のテキストの高さに調整します。
隠されたと私はすぐに最初に行った事がオーバーフローを設定しましたが、それはまだ同じ振る舞いを与えます。
私はゆっくりと高さ/不透明を切り替えるには、次の機能を使用しています:
function OpacityFadeToggle(e_trigger, e_element, speed)
{
$(e_trigger).toggle(
function() {
$(e_element).animate({
opacity: 0.0,
height: "0px"
}, speed);
},
function() {
$(e_element).animate({
opacity: 1.0,
height: "500px"
}, speed);
}
);
}
$(function() {
OpacityFadeToggle("a#a2", "div#b1", 1000);
});
私の "B1" のdivのスタイルは、次のされます:
div#b1 {
color: #ffffff;
background-color: #000000;
overflow: hidden;
width: 600px;
height: 500px;
padding: 0px;
margin: 0px;
display: block;
}
あなたは、むしろ実際の例を見てみたいと思います場合、私は一時的にこっちのページを設定しました:私をクリックしてください!の
この問題に関するすべてのヘルプははるかに高く評価されます。
解決
アニメーションが行われた後のdivを隠し、その後、それは1ピクセルするアニメーションはどう?また、500pxなどに1ピクセルからアニメーションの前に再びdiv要素を表示することを確認します。
function OpacityFadeToggle(e_trigger, e_element, speed)
{
$(e_trigger).toggle(
function() {
$(e_element).animate({
opacity: 0.0,
height: "1px"
}, speed).hide();
},
function() {
$(e_element).show().animate({
opacity: 1.0,
height: "500px"
}, speed);
}
);
}
他のヒント
あなたは、jQueryのアニメーションのコールにコールバックを追加してみてください、とコールバックの内側にそれの表示プロパティを変更することにより、DIVを非表示にすることができます。
所属していません StackOverflow