jquery - 调整幻灯片上的 div 大小

Question

我希望 .left div (width:20%;) 滑入 .right div (initial width: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>

​</p>

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'不存在……实际上，它存在！它在规格中：

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

我真的不知道为什么它在这里不起作用。而且show看起来有问题（小华丽的演示）。

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

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

并使用此编辑功能：

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

演示

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);
});