Question

我有2个div，70％和30％宽度，在100％宽度内包含div。点击我希望70％div更改为100％宽度并'滑过'30％div，然后在第二次点击时缩回到70％并恢复30％div。我已经在下面取得了一半的预期效果;它'滑过'较小的div但保留了70％的宽度。我不能在没有口吃动画的情况下将宽度扩展到100％，因为我在切换后调用宽度变化或者扩展到100％但是另外30％div仍然可见并且将div敲到2行

http://jsfiddle.net/establish/scKf2/

我确实看到另一个类似的问题有效，但它们是静态宽度，如果不再出现上述问题，我无法将它们成功转换为百分比。

http://jsfiddle.net/establish/kjDYh/

HTML

<div id='ember'>

<div id='sidebar'>
</div>

<div id='activity'>
    <a href='#' id='trigger'>Nav</a>
</div>

</div>

CSS

#sidebar { 
background-color: green; 
float: left;
height: 200px;
position: relative;
z-index: 5;
width: 30%;
}

#activity { 
background-color: purple; 
float: left;
height: 200px;
position: relative;
z-index: 10;
width: 70%;
}

a { 
color: white;
display: block; 
padding: 12px; 
text-decoration: none;
}

JS - 首次尝试

$('#trigger').click(function() {

$('#sidebar').animate({width: 'toggle'});

});

JS - 第二次尝试

$('#trigger').toggle(function() {
    $('#sidebar').animate({width: '+=22em'});
    $('#activity').animate({width: '-=22em'});
},function() {
    $('#sidebar').animate({width: '-=22em'});
    $('#activity').animate({width: '+=22em'});
});

Answer 1

你可以这样做吗？

http://jsfiddle.net/kjDYh/2/

基本上将导航设置为0px，将main设置为100％？

$('#trigger').toggle(function() {
    $('#sidebar').animate({width: '100%'});
    $('#activity').animate({width: '0px'});
},function() {
    $('#sidebar').animate({width: '70%'});
    $('#activity').animate({width: '30%'});
});

Answer 2

为什么不在jquery调用中设置宽度％？

$('#trigger').click(function() {

    $('#sidebar').animate({width: '100%'});
    $('#activity').animate({width: '0px'});

});

等

切换，点击新按钮。

http://jsfiddle.net/zWxUj/10/

Answer 3

$('#trigger').toggle(
    function() {
        $('#activity').animate({width: '100%'});
        $('#sidebar').animate({width: '0%'});
    },
    function() {
        $('#activity').animate({width: '70%'});
        $('#sidebar').animate({width: '30%'});
    });

这有用吗？

jsfiddle

滑动百分比宽度

3 个答案: