jquery - スライド中にdivのマージンを維持するには?

Question

<button id="btnHome">HOME</button>
<div id="gall"></div>

CSS

#gall{
    margin-top:25px;
    height:70px;
    border:thin solid red;
}

JS

$("#btnHome").click(function() {
    $('#gall').slideToggle("slow");
});

このフィドルでは、slideDown 中の上マージンがから#gall始まり、slideUp 中はその逆であることがわかります。マージンを維持したい-このマージン値を維持してスライドするだけです。025px
#gall25px

score 4 · Accepted Answer

まず、次のように与え!importantますmargin-top。

#gall{
  margin-top:25px !important;
  height:70px;
  border:thin solid red;
}

第二に、jQueryslideToggle()は高さを変更して要素を非表示および表示でき、jquery が他の css プロパティを追加するかどうかは誰にもわかりません。解決策は、次のように独自のアニメーションを作成することです。

$("#btnHome").click(function() {
    $('#gall').animate({height:'toggle'},"slow");
});

幸運を

score 3 · Accepted Answer

これは、slideToggle 機能の一部で、高さと余白をアニメーション化します。余白はjavascriptで削除されるので、!importantで上書きできるので試してみてください

#gall{
    margin-top:25px !important;
    height:70px;
    border:thin solid red;
}

2 に答える 2