jQuery動畫橫向拉伸左邊的問題

Question

我試圖從30px到頁面寬度的100％拉伸對齊到頁面右側的div。我的JavaScript移動跨頁30PX吧..錯誤:(

謝謝

HTML：

<div id="header"> 
    <div id="logo"> 
       <h1>DEETRA</h1> 
      </div> 
</div> 
<div id="main"> 
      <div id="trigger_left"> 
       <img class="arrow_small" id="main_arrow" src="images/left_small.png" alt="slide menu out" /> 
     </div> 
      <div id="trigger_right"> 
       <img class="arrow_small" id="main_arrow" src="images/right_small.png" alt="slide menu in" /> 
      </div> 
      <div id="slider"> 
       <div class="trans" id="overlay"></div> 
       <div id="content"> 
        <div id="main_nav"> 
       <div class="nav" style="float:left;"> 
           <h3>CAMPAIGNS</h3> 
           <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p> 
         </div> 
          <div class="nav" style="float:right;"> 
           <h3>CONTACT</h3> 
           <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p> 
         </div> 
          <div class="nav" style="margin:0 auto;"> 
          <h3>COLLECTIONS</h3> 
          <p>Sed enim risus, congue non, tristique in, commodo eu, metus.</p> 
         </div> 
         </div> 
      </div> 
      </div> 
</div> 

CSS：

* { 
margin:0; 
} 
body { 
    width:100%; 
    height:100%; 
    background:url(../images/one.jpg) no-repeat; 
    background-size:100%; 
    padding:0px; 
    font-family:FuturaStdLight, Futura, Helvetica, Arial, sans-serif; 
    font-size:14px; 
    color:#fff; 
    line-height:120%; 
} 
.trans { 
    background-color:#000; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter:alpha(opacity=70); 
    -moz-opacity:0.70; 
    -khtml-opacity:0.70; 
    opacity:0.70; 
} 
#logo { 
    width:213px; 
    height:105px; 
    position:relative; 
    background:url(../images/logo.png) no-repeat 0 0; 
    white-space:nowrap; 
    text-indent:9999px; 
    overflow:hidden; 
} 
#main { 
    width:100%; 
    height:306px; 
    top:50%; 
    margin-top:-153px; 
    position:absolute; 
    overflow: hidden; 
} 
#trigger_left { 
    width:30px; 
    height:100%; 
    float:right; 
    position:relative; 
    z-index:2; 
} 
#trigger_right { 
    width:30px; 
    height:100%; 
    float:left; 
    position:relative; 
    z-index:2; 
} 
.arrow_small { 
    left:50%; 
    top:50%; 
    margin-left:-6px; 
    margin-top:-12px; 
    position:absolute; 
} 
#slider { 
    width:inherit; 
    height:inherit; 
    top:0; 
    right:0; 
    float:right; 
    position:absolute; 
} 
#overlay { 
    width:inherit; 
    height:inherit; 
    position:absolute; 
} 
#content { 
    width:inherit; 
    height:inherit; 
    position:relative; 
    z-index:1; 
} 
#main_nav { 
    width:744px; 
    margin:0 auto; 
    padding:0px 30px 0px 30px; 
} 
.nav{ 
    width:208px; 
    padding:20px 10px 20px 10px; 
    text-align:center; 
} 
#footer { 
    height:12px; 
    position:absolute; 
    bottom:0; 
    right:0; 
    padding:0px 40px 40px 0px; 
    z-index:1; 
} 

的Javascript：

$(document).ready(function(){ 
// Hide functions 
    $('#slider').css({width: '30px'}); 
// Navigation drop down menu 
    $('#trigger_left').click(function(){ 
     $('#slider').animate({ width: '100%' }, 1500); 
    }); 
    $('#trigger_right').click(function(){ 
     $('#slider').animate({ width: '30px',}, 1500); 
    });  
}); 

Answer 1

丹尼爾，我把你的問題將圖片更改爲藍色div s，並在您的#slider周圍放置邊框，以便我可以看到它在做什麼。

如果我正確理解你的問題，你的代碼就完全符合你的要求。檢查出來：http://jsfiddle.net/nn4sJ/3/

Answer 2

改變了一些CSS，現在它的工作。使用寬度：100％，而不是繼承。

#slider { 
    width:100%; 
    height:100%; 
    top:0; 
    right:0; 
    float:right; 
    position:absolute; 
} 
#overlay { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 
#content { 
    width:100%; 
    height:100%; 
    position:relative; 
    z-index:1; 
}