Question

使用float 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 float改为右侧的版本，这样你就可以看到我的意思。查看动画期间可以看到的白线。

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

Answer 1

我有两个不同的解决方案供您考虑此Chrome问题。

参考： jsFiddle 1

此 jsFiddle 将您的方法与解决方法一起用于Chrome浏览器的白色元素之间的界线，因为它动画，同时尊重两者元素必须具有独特的尺寸。使用 position:absolute 表示 Div2与 z-index 的 1 一起使用。投入一个1像素的填充物 “ 涵盖 ”就像一个白色差距的创可贴。

参考： jsFiddle 2

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

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

1 个答案: