Javascript 带负边距的盲

我使用jQueryUI以便可以使用blind函数向下滑动div，但是，它不能正常工作

以下是我启动的JSFIDLE：

由于某些原因，在滑动动画完成之前，边不会注册，此时它们会弹出。如何使侧面从开始到结束都注册（它们应该始终是

框的宽度
类）

HTML:

JS:

说明：Jquery UI blind effect将在元素高度上设置动画时设置边距：0

您必须重新设计html以拆分.box以删除其填充，否则，请修补jquery ui javascript以删除效果器中的“边距：0”

您可以通过定位内部容器“relative”来解决此问题，因此不需要重新制作html

.footer {
  background: none repeat scroll 0 0 #FF0000;
  display: none;
  left: -20px;
  margin-top: 25px;
  padding: 15px 25px;
  position: relative;
  right: 0;
  width: 100%;
}

我认为问题在于jQuery在切换元素时更改元素属性的顺序，以及在页脚上设置负边距的事实

您可能会去掉.box的左右填充，然后将.box内容放在一个单独的div中，该div有边距。不过，这是一种潜在的“黑客”方式

这里有一个潜在的解决方案

jQuery保持不变，只有CSS/HTML发生了变化

见

HTML

您根本不需要jQuery用户界面：

$('.box').click(function() {
    $('.footer').slideToggle();
});


相关：Bagwell，你能解释一下为什么选择html重新设计解决方案吗？奇怪，因为我的解决方案只包含3行css操作。Josh Beam，我缩进了你的.css部分。没什么大不了的（除了我的“缩进”精神病）。@milchepaten这不是一种疾病：）在HTML和CSS代码之间添加
，这看起来不错。你甚至不需要H3，是吗？除非只是为了它的语义。如果OP只是将切换（“盲”）更改为slideToggle（），则不会出现两边“弹出”的问题。我不想使用slide（），因为它“挤压”/扭曲内容。
$('.box').click(function() {
    $('.footer').toggle("blind");
});

.footer {
  background: none repeat scroll 0 0 #FF0000;
  display: none;
  left: -20px;
  margin-top: 25px;
  padding: 15px 25px;
  position: relative;
  right: 0;
  width: 100%;
}

<div class="box">
    <div class="content">Click Me!</div>
    <div class="footer">
        The sides don't pop out anymore!
    </div>
</div>

.box {
    background: #f5f5f5;
    width: 250px;
    /* took off the left and right padding */
    padding: 25px 0;
}

.content {
    /* "simulates" the padding of .box that you had before */
    margin: 0 25px;   
}

.footer {
    background: red;
    padding: 15px 25px;
    /* took off the negative margins */
    margin-top: 25px;
    display: none;
}

$('.box').click(function() {
    $('.footer').slideToggle();
});

<div class="box">
    <h3>Click Me!</h3>
    <div class="footer">
        See how the sides popped Greatly?
    </div>
</div>

.box {
    background: #f5f5f5;
    width: 300px;
    padding-bottom: 15px;
}
.box h3{
    padding:25px 25px 10px;
}
.footer {
    background: red;
    padding: 15px 25px;
    display: none;
}