jquery - 切换 div 时填充空白区域

Question

我有两个 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%');
        } 


        });

    });

我的问题是左 div 隐藏不顺畅我感觉 rightdiv 在 rightdiv 隐藏之前获得 100% 的宽度。

任何帮助表示赞赏。

Answer 1

我不太了解您要显示/隐藏的 DIV，但您可以尝试这种方式。您应该同时为每个元素设置动画，而不是使用回调函数。

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

看看这个小提琴是否是你所期望的。

编辑#1

http://jsfiddle.net/XXzbm/

编辑#2

将其添加到正确的 DIV 中：

position:absolute;
right:0;

并删除float:right

http://jsfiddle.net/XXzbm/6/