jQuery animate left不影响其他div

我有一个页面，有一个左面板、一个主面板（在中间）和一个右面板。 左面板和右面板我都希望能够移开（从而使主面板更大）。 我在侧面板上添加了一个jQuery动画，但是主面板只是静止不动，我不明白为什么当其他div离开时它不会变大

HTML

  <aside id="_left" class="left collapsible">
    <div id="left_ExpanderCollapse"><span>&lt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside>

  <aside id="_right" class="right collapsible">
    <div id="right_ExpanderCollapse"><span>&gt;</span></div>
    <div style="clear: both"></div>
    <table cellpadding="0", cellspacing="0">
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
    </table>
    test 2
  </aside> 

  <div id="_main" >
    <h1>Title</h1>
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    Here is the main!<br />
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p><p>text</p>    
    <div id="pushFooter"></div>
  </div>

<footer>
  Here is some small footer text
</footer>

JS/jQuery

  // make the aside containers as high as the main container
  $("aside").each(function() {
    if($("#_main").height() < $("div.wrapper").height())
      $("#_main").height($("div.wrapper").height());
    $(this).height($("#_main").height());
  });
  // make the footer(s) as wide as the main container
  $("footer").each(function() {
    $(this).width($("#_main").width());
  });
  // make left resizeable
  $( "#_left" ).resizable({handles: 'e, w'});

  $("#left_ExpanderCollapse").click(function() { //alert($(this).text());
    if($(this).text() == "<") {
      var fold     = "-";
      var newArrow = ">"; 
      $("#_left").animate( { left:    fold+'='+($("#_left").width()-$(this).width()),
                            opacity: "0" }, 1000 );
    }
    else {
      var fold     = "+";
      var newArrow = "<";
      $("#_left").animate( { opacity: "1",
                            left:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
    }
    $(this).text(newArrow);
  });

//使备用容器与主容器一样高
$（“旁白”）。每个（函数（）{
if（$（“##u main”）.height（）<$（“div.wrapper”）.height（））
$（“#u main”）.height（$（（“div.wrapper”）.height（））；
$（this.height（$（“#_main”）.height（））；
});
//使页脚与主容器一样宽
$（“页脚”）。每个（函数（）{
$（this.width（$（“#_main”）.width（））；
});
//使左侧可调整大小
$（“#u left”）。可调整大小（{handles:'e，w'}）；
$（“#左#ExpanderCollapse”）。单击（函数（）{//警报（$（this.text（））；
如果（$（this）.text（）=”；
$（“##########左”），
不透明度：“0”}，1000）；
}
否则{
var fold=“+”；
var newArrow=“如果有人需要这个，我自己找到的：

更改左/右div的“left”或“right”属性似乎不会影响main，即使div是相对的。相反，我必须更改左/右边距值。因此，在上面的单击函数中，我更改如下（left=marginLeft）：

if（$（this）.text（）=”；
$（“#左”）.animate（{marginLeft:fold+'='+（$（“#左”）.width（）-$（this.width（）），
不透明度：“0”}，1000）；
}
否则{
var fold=“+”；
var newArrow=“呵呵，我只是在为你制定一个解决方案。解决得好，回馈社区和发布你的解决方案也做得好。
  // make the aside containers as high as the main container
  $("aside").each(function() {
    if($("#_main").height() < $("div.wrapper").height())
      $("#_main").height($("div.wrapper").height());
    $(this).height($("#_main").height());
  });
  // make the footer(s) as wide as the main container
  $("footer").each(function() {
    $(this).width($("#_main").width());
  });
  // make left resizeable
  $( "#_left" ).resizable({handles: 'e, w'});

  $("#left_ExpanderCollapse").click(function() { //alert($(this).text());
    if($(this).text() == "<") {
      var fold     = "-";
      var newArrow = ">"; 
      $("#_left").animate( { left:    fold+'='+($("#_left").width()-$(this).width()),
                            opacity: "0" }, 1000 );
    }
    else {
      var fold     = "+";
      var newArrow = "<";
      $("#_left").animate( { opacity: "1",
                            left:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
    }
    $(this).text(newArrow);
  });

if($(this).text() == "<") {
  var fold     = "-";
  var newArrow = ">"; 
  $("#_left").animate( { marginLeft:    fold+'='+($("#_left").width()-$(this).width()),
                        opacity: "0" }, 1000 );
}
else {
  var fold     = "+";
  var newArrow = "<";
  $("#_left").animate( { opacity: "1",
                         marginLeft:    fold+'='+($("#_left").width()-$(this).width()) }, 1000 );
}
$(this).text(newArrow);