左側jQuery動畫不會影響其他div

Question

我有一個左面板，主（中間）和右側的頁面。 這兩個，我想要能夠離開（從而使主要更大）的左側和右側面板。 我添加了一個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> 

CSS

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 

.wrapper { 
    width: 80%; 
    min-height: 98%; 
    border: 1px solid #000; 
    padding: 0.5em; 
    margin: 0 auto -5em; /* -5em being the size of the footer */ 
} 
footer, #pushFooter { 
    height: 5em; 
} 
footer { 
    border: 1px solid #ff0000; 
    font-size: 0.7em; 
    margin: 0 auto; 
} 

#_main { 
    background-color: #999; 
} 

aside.left { 
    float: left; 
    background-color: #eee; 
    display: inline-block; 
    border: 1px solid #0000ff; 
} 
aside.right { 
    float: right; 
    background-color: #eee; 
    display: inline-block; 
    border: 1px solid #0000ff; 
} 
#_left, #_right{ 
    min-width: 15em; 
} 
#_left_ExpanderCollapse { 
    width: 20px; 
    margin-right: 5px; 
} 
#_right_expanderCollapse { 
    width: 20px; 
    margin-left: 5px; 
} 

#left_ExpanderCollapse, #right_ExpanderCollapse { 
    cursor: pointer; 
    text-align: center; 
    font-weight: bold; 
    font-size: 1.2em; 
    color: #fff; 
    width: 20px; 

    background-color: #0492d0; 
    /* round box */ 
    -moz-border-radius: 75px; 
    -webkit-border-radius: 75px; 
    border-radius: 75px; 
} 
.collapsible { 
    position: relative; 
} 

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

Answer 1

如果有人需要這個，我發現它自己：

更改我的左/右divs的「左」或「右」屬性似乎沒有影響主，即使divs是相對的。相反，我不得不改變左/右邊距值。所以上面點擊功能，我改變了這樣的（左= marginLeft）：

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