Question

我希望.left div（宽度：20％;）滑入.right div（初始宽度：100％;）并让.right div在动画上调整宽度：80％;

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

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'，'hide'和'toggle'。这些快捷方式允许自定义隐藏并显示考虑到的显示类型的动画元件。

我真的不知道为什么它不在这里工作。 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的宽度来决定如何继续 code http://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);
});

在幻灯片上调整div的大小

3 个答案: