1

关于我之前的问题；jQuery幻灯片动画。为了有一个滑块，我使用了这个解决方案：

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;
} ​

演示

问题是当您在谷歌浏览器中最小化/最大化页面（缩放不是 100%）时，滑块不再平滑滑动。但如果我在 Firefox/IE 中测试它，它运行良好。

是什么导致谷歌浏览器中滑块之间的空间？这是谷歌浏览器的错误吗？我该如何解决？谢谢你。

4

1 回答 1

3

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

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

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

结果是我们最终只为一个元素而不是两个元素设置动画，因此它们更有可能彼此齐平。

于 2012-05-14T13:14:31.163 回答