Скользящее деление по горизонтали с JQuery

Question

так что я очень плохо знаком с Javascript и Jquery. Я хотел бы создать страницу с двумя столбцами, где ссылки в левом столбце приведут к тому, что div справа сдвинется по горизонтали слева направо и выскользнет из поля зрения при повторном нажатии. Я знаю, что мне нужно использовать эффект переключения слайдов, но у меня возникают проблемы с его реализацией таким образом, чтобы каждая отдельная ссылка приводила к скольжению отдельного элемента div ... Я попытался настроить несколько jsfiddles, которые я нашел с помощью поиска в Google, но Я довольно потерян, когда дело доходит до JavaScript.

Пока это единственная скрипка, которую я смог успешно настроить ... http://jsfiddle.net/bridget_kilgallon/HAQyK/
но они скользят вертикально и загружают все div при нажатии.

Вот скрипка, которую я создал для разметки страницы, которую я хотел бы без javascript ... http://jsfiddle.net/bridget_kilgallon/NhanG/

Пожалуйста, помогите! :) -Бриджит

Answer 1

К сожалению, в jQuery нет готовой горизонтальной анимации слайдов. Если вы не идете с большими пакетами, такими как jQuery UI. Но я не думаю, что это необходимо.

Единственное, что вам нужно, - это творческое использование функции animate() в jQuery для достижения эффекта.

Я не знал, с кем вы хотели бы пойти, поскольку описание было расплывчатым, поэтому я сделал 2 примера для незначительных эффектов при переключении панели:

http://jsfiddle.net/sg3s/rs2QK/ - Эта скользящая панель открывается слева и закрывается вправо

http://jsfiddle.net/sg3s/RZpbK/ - Панели открываются слева направо и закрываются слева до открытия нового.

Ресурсы:

• http://api.jquery.com/animate/

Вы не можете сделать это с чистым CSS, пока что нет. Поддержка переходов является базовой и ограничивается в значительной степени только браузерами на основе webkit. Поэтому, так как вам понадобится jQuery, разумно используйте его, но вам все равно нужно убедиться, что вы используете как можно больше стиля с помощью css, прежде чем использовать JS. Обратите внимание, что я не использую визуальные стили / манипуляции в моем JS.

Answer 2

Без использования JavaScript вы ограничены использованием CSS-переходов, где это возможно.И хотя они довольно впечатляющие, они, на мой взгляд, не особенно хороши для условной анимации;они могут в основном анимировать от начальной точки до другой точки и затем обратно (на основе собственных событий браузера, доступных в самом браузере), с помощью JS вы можете добавлять / удалять дополнительные классы, а элементы div перемещаются к содержимому вашего сердца., но не с помощью «просто» CSS (хотя я бы хотел, чтобы в этом оказались неправы).

Лучшее, что я смог до сих пор придумать, это:

#left {
    float:left;
    width:200px;
}
.right {
    height: 0;
    background-color: #fff;
    margin-left: 205px;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}
.right:target {
    display: block;
    height: 5em;
    background-color: #ffa;
    -webkit-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}​

JS Fiddle demo .

И это не скатывается со стороны (хотя вы можете сделать это, если хотите), потому что не выглядело хорошо, учитываяповторное переформатирование содержимого, которое происходило при изменении ширины элемента.

Отредактировано , потому что я думаю, что, возможно, неправильно истолковал часть исходного вопроса:

... Я бы хотел без какого-либо javascript

В таком случае, и комментарий (ниже), по-видимому, предполагает, что jQuery - хороший вариант, это может быть полезно в качестве демонстрации:

​$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });​​​​​​​​

Демонстрация JS Fiddle .

Справочные материалы:

• animate().
• *. 1036 *attr().
• [attribute="value"] селектор .
• click().
• each().
• eq().
• index().
• not().
• removeAttr().

Answer 3

Вы можете использовать модуль effects из пользовательского интерфейса jQuery и использовать show('slide'). Смотри http://jsfiddle.net/HAQyK/1/

Answer 4

$(function () {
$("#wizardV").steps({
    headerTag: "h2",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});
});

* // мастер - это div, содержащий весь ваш контент

Answer 5

Вот код, который вы хотите.Доказано, что работает в IE, Safari, Chrome, Firefox и т. Д.

Вот часть HTML.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Вот часть jQuery в функции JavaScript.

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
            });
        }
       }

Чтобы скрыть стрелки, смотрите здесь. Определение конца горизонтальной прокрутки с помощью jQuery