Jquery Slide 动画 UI - 最小化/最大化时的 Chrome Bug

Question

关于我之前的问题； Jquery slide animation 。为了有一个 slider ，我使用了这个解决方案:

HTML

<div class="bigBox">
     <div class="try2">
          <h3 id="test2">CLICK THIS</h3>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div> 
      <div class="try">
          <p id="haha">CLICK THIS</p>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div>          
</div>

​ JS

$('#haha').click(function() {
    $('.try').hide("slide", {
        direction: "left"
    }, 1000);
    $('.try2').show("slide", {
        direction: "right"
    }, 1000);
});​

CSS

div.bigBox {
  background-color:transparent;
  width:100px;
  height:125px;
  position: relative;
}

.try, .try2{
  width:100px;
  height:125px;
  position: absolute;
}

.try {
  background-color:green; 
}

.try2{
  background-color:yellow;
} ​

DEMO

问题是当您在 google chrome 中最小化/最大化页面(缩放不是 100%)时， slider 不再平滑滑动。但如果我在 firefox/IE 中测试它，它运行良好。

是什么原因导致谷歌浏览器中 slider 之间存在空格？这是谷歌浏览器的错误吗？我该如何修复它？谢谢。

Answer 1

诚然，我不确定为什么它在 Chrome 中这样做，但这里有一个稍微不同的方法，在放大一点​​时对我有用。

http://jsfiddle.net/CV7fd/20/

基本概念是将两个子元素“try”和“try2”包装在另一个div中(称为“overflowDiv”)。然后，我们将“bigBox”div 的大小限制为 100px，并将其 CSS 溢出属性设置为“隐藏”。 “overflowDiv”的宽度与“try”和“try2”的宽度一样宽，这样它们就不会换行(200px - 请记住在此计算中包括填充、边框、宽度和边距)。然后，“bigBox”实际上成为“overflowDiv”内容的窗口。然后动画简单地调整“overflowDiv”的左侧位置。

结果是我们最终只对一个元素而不是两个元素进行动画处理，因此它们更有可能彼此齐平地出现。