Jquery 切换div时填充空格

我有两个div左div的宽度应为30%，右div应占剩余空间（70%）

HTML

剧本

    $(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

---

所以，在leftDiv完成隐藏/显示之前，不要调整rightDiv的大小。@kevin我想在平滑中显示leftDiv的增长和rightDiv的隐藏animation@pete我不明白你的意思，你能给我一个代码吗？当设置好后，行为完全改变了，我也尝试过添加css，而行为根本没有改变。查看第一版中的小提琴是小提琴的行为发生了变化，隐藏rightdiv（橙色）时动画是平滑的，但再次显示时，leftdiv（红色）移动到下一行，然后移动到其位置OK，它发生在IE、FF中，而不是Chrome中。我正在寻找修复方法。因此，您可以检查编辑2

$('.rightDiv').animate({
    width: '100%'
}, 600)
$(".leftDiv").animate({
    width: '0%'
}, 600);

position:absolute;
right:0;