1

通过使用浮动 CSS 参数，使用两个并排对齐的 div。

jQuery 同时改变它们的宽度。这引起了生涩的像素化激动。我设置了一个小提琴，但 jsfiddle 已关闭。

我们如何使每个 div 宽度同时滑动而不发生这种抖动。

<div class="container">
    <div class="div d1">DIV 1</div>
    <div class="div d2">DIV 2</div>
</div>

<div style="clear:both;"></div>
</br></br>
<input class="s1" type="button" value="shift"/>
<input class="s2" type="button" value="shift back"/>
​
$(document).ready(function(){
    $('.s1').click(function(){
        $('.d1').animate({width:100},{duration:300,queue:false});
        $('.d2').animate({width:300},{duration:300,queue:false});
    });
     $('.s2').click(function(){
        $('.d1').animate({width:100},{duration:300,queue:false});
        $('.d2').animate({width:300},{duration:300,queue:false});
    });
});​
.div { display:block; width:200px; height:90px; background:#666; colour:#FFF; float:left; }

.container { border:1px solid #000; background:#EEE; width:400px; }
input { clear:both;}

​ 这是一个将右 div 浮点数更改为右的版本，因此您可以准确地看到我的意思。查看动画期间您可以在它们之间看到的白线。

http://jsfiddle.net/74zNU/1/

4

1 回答 1

1

对于这个 Chrome 问题，我有两种不同的解决方案供您考虑。

参考： jsFiddle 1

这个jsFiddle使用您的方法和Chrome 浏览器在元素之间的白线的解决方法，因为它动画同时尊重两个元素必须具有唯一的大小。position:absolutefor Div2 的使用与ofz-index一起使用1。加入一个 1 像素的填充，它会像创可贴一样“覆盖”那个白色间隙。


参考： jsFiddle 2

这个jsFiddle完全使用了不同的方法。由于在 div上设置了属性，因此只有 Div2 不会更改两个 div 的大小，而是接收模拟宽度大小更改的位置更改。这种错觉类似于之前的 jsFiddle，除了 div 始终保持其 宽度。overflowcontainer400px

于 2012-07-11T22:21:16.800 回答