jquery - 如何使用jquery为两个div的百分比宽度设置动画

Question

我这里有两个 div。第一次第一个 div 不可见，右侧 div 宽度为 100%。当单击事件时，左侧 div 从左侧开始动画，然后右侧 div 宽度将根据左侧 div 减小。我怎样才能让它成为可能

HTML

<div class="main">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>
<input type="button" name="" value"toggle">

jQuery

$("#button").live('click',function() {
    $(".left").animate({
        width: "30%"
    }, 300 );
    $("right").animate({
        width: "70%"
    }, 300 
);

Answer 1

JS FIDDLE DEMO

CSS

.main { width: 100%; height: 400px; position:relative; }
.main > div { float:left; height: 100%; }
.left { background: yellow; }
.right { background: red; width: 100%; position:absolute; left:0; z-index:-1; }

jQuery

var toggled = true;

$('#toggle').click(function() {
    if (toggled) {
        $('.left').animate({ 'width': '100%' }, 1500);
        toggled = false;
    } else {
        $('.left').animate({ 'width': '0%' }, 1500);
        toggled = true;
    }    
});

这里的诀窍是您只为一个对象而不是两个对象设置动画，当客户端浏览器上有大量负载时，这会很方便。此处，红色方 block 位于黄色方 block 的后面，但最初黄色方 block 没有宽度。