Javascript/CSS調整div同步

Question

我有一些代碼在網站中重新調整了網頁中幾個水平對齊的div，但它們都以同樣的方式重新調整div的大小，網頁看起來很醜。我怎麼才能使JavaScript代碼等待，直到它完成縮小divs展開其他div之前？

CSS：

 
#leftpanel,#middlepanel,#rightpanel 
{ 
transition: width 2s; 
-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari and Chrome */ 
-o-transition: width 2s; /* Opera */ 
} 

的Javascript：

 
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%'; 
    } 

    #this code should be run second AFTER the other divs are shrunk, right now it enlarges at the same time that the other divs are shrinking 
    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);