动画两个并排放置divs相等

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做的，但它并没有真正起作用，因为当divs的动画爆发时！

$(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%'
    });
}