Question

关于我以前的问题; 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中的滑块之间的空间？这是一个google chrome bug吗？我该如何解决？谢谢。

Answer 1

不可否认，我不确定为什么它会在Chrome中执行此操作，但这是一种稍微不同的方法，在稍微放大时对我有用。

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

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

结果是我们最终只动画了一个元素而不是两个元素，因此它们更可能彼此相邻显示。

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

1 个答案: