1

float CSSパラメーターを使用して、2つの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/

4

1 に答える 1

1

このChromeの問題について検討すべき2つの異なる解決策があります。

参照： jsFiddle 1

このjsFiddleは、両方の要素が一意のサイズである必要があることを尊重しながら、要素間のChromeブラウザの白い線を回避する方法を使用してアニメーション化します。for Div2の使用は、のと一緒に使用されます。1ピクセルのパディングを挿入すると、その白いギャップをバンドエイドのように「カバー」します。position:absolutez-index1


参照： jsFiddle 2

このjsFiddleは、まったく別の方法を使用します。両方のdivのサイズを変更する代わりに、プロパティがdivに設定されているため、Div2のみが幅のサイズ変更をシミュレートする位置変更を受け取ります。 錯覚は、divが常に幅を維持することを除いて、以前のjsFiddleに似ています。overflowcontainer400px

于 2012-07-11T22:21:16.800 に答える