Question

我有两个div 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;
        }

SCRIPT

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

切换div时填充空白区域

1 个答案: