jQuery/HTML — горизонтальная прокрутка

У меня проблемы с прокруткой... То, что я хочу сделать, это после нажатия кнопки сделать прокрутку div влево, а другую прокрутку вправо/один выходит, второй входит. Но я не могу найти никакого решения, и у меня есть проблема заставить второй div идти рядом с первым и скрыть его... Есть идеи?

Веб-сайт


scroll html jquery horizontal-scrolling jquery-animate
person David Debnar    schedule 09.09.2011    source источник
comment
Мы действительно могли бы использовать ваш реальный код. А пока посмотрите на api.jquery.com/scrollLeft.   -  person Blazemonger    schedule 09.09.2011
comment
Просто просмотрите исходный код, он не зашифрован, я не хотел помещать сюда 200-строчный код... Но в основном я не хочу, чтобы один div толкал другой и наоборот...   -  person David Debnar    schedule 09.09.2011
comment
Ваша страница ссылается на шесть внешних файлов javascript и содержит, вероятно, два десятка DIV. Пожалуйста, упростите свой код до минимума, содержащего проблему, и опубликуйте его здесь.   -  person Blazemonger    schedule 09.09.2011
comment
Извините, что не прояснил... Внешние файлы для этого не нужны и дивы... Просто найдите страницу, а внутри нее у вас есть 2 дива, галерея и главная. Я хочу, чтобы галерея была рядом с домом, но не видна и чем после щелчка галерея должна нажать домой влево.   -  person David Debnar    schedule 09.09.2011
comment
Посмотрите мой ответ @David Debnar, вы можете применить ту же технику и загрузить все страницы на одну страницу с использованием DIV и даже хэш-тегов для закладок.   -  person Xavier    schedule 09.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

Я прочитал ваш вопрос, и это то, что я понял;

Вы пытаетесь анимировать div с помощью другого div, и вот решение:

Просмотрите скрипт для рабочего примера: http://jsfiddle.net/HNY7R/

HTML

<div id="container">
    <div class="main"></div>
    <div class="second"></div>
</div>

<input type="button" id="push" value="push me" />

CSS

#container
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; }

.main
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; }

.second
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; }

jQuery

$('#push').click(function(){

        var main = $('.main').css('left');
        var second = $('.second').css('left');

        if(main == '-400px'){
            $('.second').animate({ 'left' : '400px' }, 500);
            $('.main').animate({ 'left' : '0px' }, 500);
        } else {
            $('.second').animate({ 'left' : '0px' }, 500);
            $('.main').animate({ 'left' : '-400px' }, 500);
        }


    });
person Xavier    schedule 09.09.2011
comment
Хорошо... мне это очень помогло, но у меня есть проблема... Когда я нажимаю "Показать больше контента", высота не изменяется, и я не хочу иметь большой сайт в начале, есть идеи? - person David Debnar; 09.09.2011
comment
Вы должны использовать .outerHeight() дочерних элементов, чтобы изменить размер родителя перед анимацией. - person Xavier; 10.09.2011