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

Question

我有两个 div，左边的 div 应该有 30% 的宽度，右边的 div 应该占据剩余空间(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);

看看是否this fiddle是你所期望的。

编辑#1

http://jsfiddle.net/XXzbm/

编辑#2

在正确的 DIV 中添加:

position:absolute;
right:0;

并移除float:right

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