jQuery 动画水平拉伸左侧问题

Question

我正在尝试将与页面右侧对齐的 div 从页面宽度的 30 像素拉伸到页面宽度的 100%。我的 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

丹尼尔，我将你的问题放入 jsfiddle，将图像更改为蓝色 div，并在你的 #slider 周围添加边框，这样我就可以看到它在做什么。

如果我正确理解你的问题，你的代码就会完全按照你想要的方式去做。看看：http://jsfiddle.net/nn4sJ/3/

Answer 2

修改了一些CSS，现在可以了。使用 width: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;
}