jquery - 动画两个并排放置的div相等

Question

我的身体中有两个 div，它们都具有以下 css：

#one {
    float: left;
    position: relative;
    background-color:#F00;
    height: 500px;
    width: 100%;
    left: 0px;
}
#two {
    float: left;
    position: relative;
    background-color:#FF0;
    height: 500px;
    width: 100%;
    right: 0px;
}

我想随时为其中一个向左或向右设置动画。虽然动画另一个 div 应该缩小到另一个 div 的宽度被动画更大。我的尝试是这样做，margin但它并没有真正起作用，因为当动画 div 爆发时！

$(document).ready(function () {
    var $sach = $('#one');
    var $archi = $('#two');

    function showSach() {
        $sach.animate({
            marginRight: '500px' 
        });
    }

    function showArchi() {
        $archi.animate({
            marginLeft: '500px' 
        });
    }

    $('#archi_btn').bind('click', showArchi);
    $('#sach_btn').bind('click', showSach);
});

我制作了一张图片以便更好地解释：

Answer 1

改为调整 div 的宽度。这是一个让你开始的小提琴：

http://jsfiddle.net/992k3/

function showSach() {
    $sach.animate({
        width: '74%'
    });
    $archi.animate({
        width: '24%'
    });
}

function showArchi() {
    $sach.animate({
        width: '24%'
    });
    $archi.animate({
        width: '74%'
    });
}