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

关于我以前的问题； Jquery slide animation。为了有一个滑块，我使用了以下解决方案：

的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％）时，滑块不再平滑滑动。但是，如果我在firefox / IE中对其进行测试，则效果很好。

是什么原因导致Google Chrome中的滑块之间出现间距？这是谷歌浏览器错误吗？我该如何解决？谢谢。

最佳答案

诚然，我不确定为什么要在chrome中执行此操作，但是这是稍微不同的方法，当我放大一点时，它对我有用。

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

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

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