在滑动过程中如何保持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");
});  

On this fiddle您可以看到slidingDown期间#gall的上边距从0开始到25px，反之亦然。 我希望#gall保持25px的余量 - 只需保持此保证金值。

Answer 1

首先，在您的!important中提供margin-top，如下所示：

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

其次，jQuery slideToggle()可以隐藏和显示更改高度的元素，以及谁知道jquery是否添加其他css属性和解决方案是这样制作自己的动画：

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

祝你好运

Answer 2

这是slideToggle功能的一部分，它可以设置高度和边距的动画。由于在javascript中删除了边距，我们可以使用！重写覆盖它，所以请尝试

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