Раздвижные divs горизонтально с JQuery

Ответ 1

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

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

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

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

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

Ресурсы

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

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

Ответ 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 demo.

Литература:

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

Ответ 3

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

Ответ 4

Вот код, который вы хотите. Он доказал, что работает в 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());
            });
        }
       }

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

Ответ 5

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

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