JQuery анимация горизонтального растяжения левых вопросов - PullRequest
Новая
       25

JQuery анимация горизонтального растяжения левых вопросов

0 голосов
/ 19 февраля 2011

Я пытаюсь растянуть div, выровненный по правой стороне страницы, от 30px до 100% ширины страницы.Мой javascript перемещает полосу размером 30 пикселей по странице ... неправильно: (

Спасибо!

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

Ответы [ 2 ]

1 голос
/ 19 февраля 2011

Даниэль, я поместил твой вопрос в jsfiddle, изменил изображения на синий div s, и поставил границу вокруг твоего #slider, чтобы я мог видеть, что он делал.

если я правильно понимаю ваш вопрос, ваш код делает именно то, что вы хотите. Проверьте это: http://jsfiddle.net/nn4sJ/3/

0 голосов
/ 19 февраля 2011

Изменено несколько 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;
}
...