0

ウェブページ内のいくつかの水平方向に配置された div のサイズを変更するコードがウェブサイトにいくつかありますが、両方が同時にサイズ変更されて、div がずれてウェブページが見苦しく見えます。他のdivを展開する前に、divの縮小が完了するまでjavascriptコードを待機させるにはどうすればよいですか?

CSS:

#leftpanel,#middlepanel,#rightpanel
{
トランジション: 幅 2 秒;
-moz-transition: 幅 2 秒; /* Firefox 4 */
-webkit-transition: 幅 2 秒; /* サファリとクローム */
-o-transition: 幅 2 秒; /* オペラ */
}

Javascript:

関数 resizebutton(div)
{
    if (div == '左パネル'){
        #このコードは他の div を縮小します。他の div を拡大せずに最初に実行する必要があります
        document.getElementById('middlepanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'middlepanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == '右パネル'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('middlepanel').style.width = '20%';
    }

    #このコードは、他の div が縮小された後に 2 番目に実行する必要があります。現在、他の div が縮小しているのと同時に拡大しています
    document.getElementById(div).style.width = '50%';
}
4

1 に答える 1

0

多分コールバック関数が機能するように聞こえますか？

何かのようなもの：

function resizebutton(div)
{
    if (div == 'leftpanel'){
        #this code shrinks the other divs, it should run first, without any other divs being enlarged
        document.getElementById('middlepanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'middlepanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == 'rightpanel'){
        document.getElementById('leftpanel').style.width = '20%';
        document.getElementById('middlepanel').style.width = '20%';
    }


}

function resizeMeFirst(div, callback) {
    document.getElementById(div).style.width = '50%';
    //ok, now that that is done, run the callback function.
    callback(div)    
}

resizeMeFirst(div, resizebutton);
于 2012-09-07T20:48:49.640 に答える