jQuery 动画 2 个独立的 div 宽度导致像素抖动

Question

通过浮动 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/

Answer 1

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

参考：jsFiddle 1

这个 jsFiddle 使用你的方法和一个 workaround Chrome 浏览器的白色 元素之间的线，因为它动画同时尊重 元素必须具有唯一的尺寸。 position:absolute 的使用 Div2 与 1 的 z-index 一起使用。投入一个 1 像素的填充，它 “覆盖”就像创可贴一样，白色的缝隙。

---

参考：jsFiddle 2

这个 jsFiddle 完全使用了一种不同的方法。代替 改变两个 div 的大小，只有 Div2 接收 位置 change 模拟自 overflow 属性以来的宽度大小变化 在 container div 上设置。幻觉类似于 以前的 jsFiddle 除了 div 总是保持他们的 400px 宽度。