我有一个隐藏在页面加载中的 div，并通过 jQuery 拉伸到 100% 宽度。动画很棒，但是内容会流畅地调整，直到它的容器（在可拉伸的 div 内）达到它的完整宽度。
以前内容没有变化，在对代码进行如此多的编辑后，我不知道是什么改变了这种行为！如何修复内容移动；在没有任何移动的情况下显示尽可能多的调整 div 的大小？具体问题是：
-#show_contact 锚点下降到它的两个姐妹之下，直到它有空间在同一行上 -#collections div 的边距：0 auto 受到 #show_contact 的短暂访问的影响
谢谢！
PS-这是它以前的样子/我现在想要的样子：http: //jsfiddle.net/ZP86m/
HTML：
<div id="slider">
<div id="trigger">
<img class="arrow_small" src="images/left_small.png" alt="slide menu out" />
</div>
<div class="trans" id="overlay"></div>
<div id="content">
<div id="main_nav">
<div id="nav_links">
<div class="nav_link"><h3><a class="showlink" id="show_campaigns" title="Campaigns">CAMPAIGNS</a></h3></div>
<div class="nav_link"><h3><a class="showlink" id="show_collections" title="Collections">COLLECTIONS</a></h3></div>
<div class="nav_link"><h3><a class="showlink" id="show_contact" title="Contact">CONTACT</a></h3></div>
</div>
<div id="nav_container">
<div class="nav" id="campaigns">
<p>CAMPAIGNS!</p>
</div>
<div class="nav current" id="collections">
<p>COLLECTIONS!</p>
</div>
<div class="nav" id="contact">
<p>CONTACT!</p>
</div>
</div>
</div>
</div>
</div>
CSS：
#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;
}
#main_nav {
width:684px;
height:100%;
margin:0 auto;
padding:0px 30px 0px 30px;
}
#nav_links {
width:100%;
height:40px;
}
.nav_link {
width:33%;
float:left;
margin:20px 0px 0px 0px;
position:relative;
text-align:center;
}
.nav{
width:208px;
height:100%;
padding:20px 10px 20px 10px;
margin:0 auto;
text-align:center;
}
Javascript：
// Slide out menu
$('#slider')[0].style.width = '30px';
$(function() {
$('#trigger').toggle(function (){
$('#slider').animate({'width':'100%'}, 1500);
$('.arrow_small').attr('src','images/right_small.png');
}, function() {
$('#slider').animate({'width':'30px'}, 1500);
$('.arrow_small').attr('src','images/left_small.png');
});
});