JQueryアニメーションで2倍のdivの幅をリサイズする - これは貧弱なアプローチですか？

Question

私はこの機能を実行するよりエレガントな方法を見つけようとしていますが、まだ理解していません。関数の実行時にサイズを変更する2つのdivがあります。一方は滑り落ち（幅： '0％'）、他方は残りのスペース（幅： '100％'）を満たします。以下のコードは素晴らしいですが、少し重いようです。それをよりきれいにするための提案？

function testAct(){    
    $('#sideBar').animate({width:'0%'},500);   
    $('#map_canvas').animate({width:'100%'},500,function(){google.maps.event.trigger(map,'resize')});      
    if (document.getElementById('map_canvas').style.width == '100%') 
    { 
     $('#sideBar').animate({width:'25%'},500);  
     $('#map_canvas').animate({width:'75%'},500,function(){google.maps.event.trigger(map,'resize')});       
    } 
} 

Answer 1

あなた自身を繰り返さないように、私はこのような何かをするだろう：

function testAct(){ 
    var newSideBarWidth,newMapCanvasWidth; 
    if(document.getElementById('map_canvas').style.width == '100%'){ 
     newSideBarWidth = "25%"; 
     newMapCanvasWidth = "75%"; 
    } 
    else{ 
     newSideBarWidth = "0%"; 
     newMapCanvasWidth = "100%";  
    } 
    $('#sideBar').animate({width:newSideBarWidth },500);  
    $('#map_canvas').animate({ 
     width: newMapCanvasWidth 
    }, 
    function(){ 
     google.maps.event.trigger(map,'resize') 
    }); 
}