0

我在一个网站中有一些代码可以重新调整网页中一些水平对齐的 div 的大小，但是它们都同时重新调整大小，使得 div 被移位并且网页看起来很丑。如何让 javascript 代码等到它完成缩小 div 后再扩展另一个 div？

CSS：

#leftpanel,#middlepanel,#rightpanel
{
过渡：宽度2s；
-moz-transition：宽度 2s；/* 火狐4 */
-webkit-transition：宽度 2s；/* Safari 和 Chrome */
-o-transition: 宽度 2s; /* 歌剧 */
}

Javascript：

函数调整大小按钮（div）
{
    if (div == 'leftpanel'){
        #此代码缩小其他div，它应该首先运行，没有任何其他div被放大
        document.getElementById('middlepanel').style.width = '20%';
        document.getElementById('rightpanel').style.width = '20%';
    }
    if (div == '中间面板'){
        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%';
    }

    #此代码应在其他 div 缩小后第二次运行，现在它在其他 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 回答