Javascript/CSS调整div同步大小

Question

我在一个网站上有一些代码，它重新调整了网页中几个水平对齐的div的大小，但它们同时重新调整了大小，导致div被替换，网页看起来很难看。如何让javascript代码等到收缩完div后再扩展另一个div？

CSS：

#左侧面板、#中间面板、#右侧面板{过渡：宽度2s；-moz转换：宽度2s；/*Firefox 4*/-webkit转换：宽度2s；/*Safari和Chrome*/-o-transition：宽度2s；/*Opera*/}

Javascript：

函数大小按钮（div）{if（div=='leftpanel'）{#这段代码缩小了其他div，它应该首先运行，而不放大任何其他divdocument.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%'；}#该代码应该在其他div收缩后第二次运行，现在它在其他div缩小的同时放大document.getElementById（div）.style.width='50%'；}

Answer 1

听起来回调函数可能会起作用？

类似于：

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);