0

体に 2 つの 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;
}

そして、いつでもそのうちの1つを左または右にアニメーション化したいと思います。他の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);
});

よりよく説明するために写真を作成しました：

写真

4

1 に答える 1

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%'
    });
}
于 2013-06-06T13:19:22.400 に答える