jQuery - 组合幻灯片切换和动画时闪烁

Question

我正在尝试使用隐藏的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/

您知道如何解决此问题或解决我问题的替代方法吗？

Answer 1

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

transition-duration: 0.5s;

我在这里用一个例子更新了你的小提琴