调整幻灯片上的 div 大小

Question

我希望 .left div (width:20%;) 滑入 .right div (初始宽度:100%;) 并让 .right div 在动画上调整为 width:80%;

基本上，滑动一个 div 并让另一个调整大小。

http://jsfiddle.net/LTUTR/

HTML

<div class="container">

<div class="left">
    <p>left</p>
</div>
<div class="right">
    <p>right content</p>
    <p class="showLeft">[Show left div]</p>
</div>

​

CSS

html, body {
    width:100%;
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left, .right {
    float: left;
    height: 100%;
}

.left {
    background: green;
    width: 20%;
    display: none;
}

.right {
    background: red;
    width: 100%;
}

.showLeft {
    cursor: pointer;
}
​

JS

$('.showLeft').click(function(){
    $('.right').animate({width: '80%'},350);    
    $('.left').animate({width:'toggle'},350);
});

Answer 1

很遗憾，width:'toggle' 不存在...实际上，它存在！我是in the specs：

除了数值，每个属性都可以取字符串 “显示”、“隐藏”和“切换”。这些快捷方式允许自定义隐藏 并显示考虑到显示类型的动画 元素。

我真的不知道为什么它在这里不起作用。 show 似乎有问题 (little flashy demo)。

无论如何，你可以将初始宽度设置为0：

.left {
    background: green;
    width:0;
    display: none;
}

并使用此编辑功能：

$('.showLeft').click(function(){
        $('.right').animate({width: '80%'},350);
        $('.left').css('display','block').animate({width:'20%'},350);
});

Demo

Answer 2

这是平滑来回动画的代码。我们只是在查看左侧 div 的宽度来决定如何进行 codehttp://jsfiddle.net/marktoth/W7UwU/7/

Answer 3

试试：

$('.showLeft').toggle(function(){
    $('.right').animate({width: '80%'},350);    
    $('.left').animate({width:'toggle'},350);
},
function(){
    $('.right').animate({width: '100%'},350);    
    $('.left').animate({width:'toggle'},350);
});