Resize 2x divs width with Jquery Animate - Is this a poor approach?
<p>I've been trying to find a more elegant way to do this function but have not yet figured it out.  I have 2 divs that I'd like to resize upon execution of a function.  One will slide away (width:'0%') and the other fills the remaining space (width:'100%').  The code below works great but seems a little heavy.  Any suggestions for making it cleaner?</p>

<pre><code>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')});                        
    }
}
</code></pre>
