私は2つのdivを持っています。左のdivは30％の幅で、rightdivは残りのスペース（70％）を占める必要があります。
HTML
<div class="leftDiv">
menu
</div>
<div class="rightDiv">
<span id="showdiv" style="float:left;cursor:pointer;">>>></span>content
</div>
CSS
.leftDiv{
float:left;
height:100% !important;
width:30%;
background:orange;
}
.rightDiv{
float:left;
height:100%;
background:red;
}
脚本
$(function(){
var toggle=1;
$('#showdiv').click( function() {
if(toggle==1){
toggle=0;
$(".leftDiv").toggle(600,function() {
});
$('.rightDiv').width('100%');
}else{
toggle=1;
$(".leftDiv").toggle(600,function() {
});
$('.rightDiv').width('70%');
}
});
});
私の問題は、left divがスムーズに非表示にならないことです。rightdivが非表示になる前にrightdivの幅が100％になると感じています。
どんな助けでも大歓迎です。
DIVが表示/非表示にしようとしているのかよくわかりませんが、この方法で試すことができます。コールバック関数を使用せずに、各要素を同時にアニメーション化する必要があります。
$('.rightDiv').animate({
width: '100%'
}, 600)
$(".leftDiv").animate({
width: '0%'
}, 600);
かどうかを確認し、このバイオリンは、あなたが期待したものです。
編集＃1
編集＃2
これを右のDIVに追加します：
position:absolute;
right:0;
削除します float:right
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加