我正在尝试使用一个隐藏的div,当我按下一个按钮使其可见时,我希望它“推开”另一个div的一部分,换句话说,包含div的大小保持不变。

现在,我可以正常工作了,但是隐藏的div下方的div忽隐忽现,或者上下跳动了一点。这可能是因为我的动画不是同时发生的。

下面是我的代码:

HTML:

<div id="wrapper">
    <div id="button">CLICK</div>
    <div id="content"></div>
    <div id="hidden"></div>
    <div id="bottom"></div>
</div>


CSS:

#wrapper {
    border: 1px solid green;
    width 300px;
}
#content {
    border: 1px solid red;
    height: 200px;
}
#hidden {
    border: 1px solid blue;
    height: 100px;
}
#bottom {
    height: 20px;
    border: 1px solid purple;
}


JAVASCRIPT

  $("#button").click(function (e) {
      var newHeight = $("#content").height();
      var hiddenHeight = $("#hidden").outerHeight();
      var visible = $("#hidden").is(":visible");

      newHeight += (visible ? hiddenHeight : -hiddenHeight);

      $("#hidden").slideToggle({
          duration: 200,
          queue: false
      });

      $("#content").animate({
          height: newHeight
      }, {
          duration: 200,
          queue: false
      });
  });


小提琴:
http://jsfiddle.net/2exxrs1n/

您是否知道如何解决此问题,或者对我的问题有替代解决方案?

最佳答案

我猜是因为jQuery动画没有完全同步。
也许尝试考虑CSS3过渡。

transition-duration: 0.5s;


我在这里用示例更新了your fiddle

10-05 20:37
查看更多