百分比宽度的滑动div
我有2个div,70%和30%宽度,在包含div的100%宽度内。点击时,我希望70%的div变成100%的宽度,然后'滑过'30%的div,第二次点击回退到70%,并恢复30%的div。我已经在下面达到了预期效果的一半;它'滑过'较小的div但保留了70%的宽度。我无法将宽度扩展到100%而没有口吃动画,因为我在切换后调用宽度更改或将其展开至100%,但其他30%div仍然可见,并将div敲入2行。百分比宽度的滑动div
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'});
});
你可以做这样的事情?
基本上设置NAV为0px和主要为100%?
$('#trigger').toggle(function() {
$('#sidebar').animate({width: '100%'});
$('#activity').animate({width: '0px'});
},function() {
$('#sidebar').animate({width: '70%'});
$('#activity').animate({width: '30%'});
});
为什么不设置宽度%在jQuery的电话吗?
$('#trigger').click(function() {
$('#sidebar').animate({width: '100%'});
$('#activity').animate({width: '0px'});
});
等
切换,新的按钮,单击后退。
对不起,我编辑了它来解释它需要来回切换 – 2012-03-29 08:19:51
$('#trigger').toggle(
function() {
$('#activity').animate({width: '100%'});
$('#sidebar').animate({width: '0%'});
},
function() {
$('#activity').animate({width: '70%'});
$('#sidebar').animate({width: '30%'});
});
工作的呢?
你刚刚没有发布我的jsfiddle例子吗? – 2012-03-29 08:23:21
错误的小提琴,编辑。 – cctan 2012-03-29 08:27:11
糟糕,您可能必须将#sidebar和#activity的宽度轮换为 – 2012-03-29 08:21:48
Bah,最后很简单。谢谢! – 2012-03-29 08:24:43
为什么从来没有想过使用'0px'而不是'0%'。 +1 – cctan 2012-03-29 08:28:31