Question

我尝试使用隐藏的div，当我按下按钮使其可见时我想要它＆＃34;推＆＃34;离开另一个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;

我在这里用一个例子

更新了your fiddle

jQuery - 组合slideToggle和animate时闪烁

1 个答案: