Предотвращение анимированной ширины jQuery от плавно движущегося содержимого - PullRequest
Новая
       32

Предотвращение анимированной ширины jQuery от плавно движущегося содержимого

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

У меня есть div, который скрывается при загрузке страницы и растягивается до 100% ширины через jQuery. Анимация отличная, но содержимое плавно корректируется до тех пор, пока его контейнер (который находится в пределах эластичного элемента div) не достигнет своей полной ширины.

Раньше контент не сдвигался, и я не могу сказать, что изменило это поведение после стольких изменений кода! Как я могу исправить перемещение контента; показывает столько, сколько позволяет изменение размера div без какого-либо движения? Конкретные проблемы:

- # show_contact якорь опускается ниже двух своих сестер, пока не будет места для одной линии - поле # коллекций div: 0 на авто влияет короткое посещение # show_contact

Спасибо!

P.S. - вот как это было раньше / как я хочу, чтобы оно выглядело сейчас: 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');
    });
});

1 Ответ

0 голосов
/ 29 апреля 2011

заполнение main_nav должно соответствовать ширине анимации ползунка

...