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 的宽度。这是一个让你入门的 fiddle :

http://jsfiddle.net/992k3/

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

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