Sliding divs horizontally with JQuery

Question

so I\'m very new to Javascript and Jquery. What I\'d like to create is a two column page where links on the left column will cause a div on the right to slide in horizontall

Answer 1

Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.

The only thing you want is some creative use of the animate() function in jQuery to achieve an effect.

I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:

http://jsfiddle.net/sg3s/rs2QK/ - This one slides panel open from the left and to close to the right

http://jsfiddle.net/sg3s/RZpbK/ - Panels slide open from left to right and close to the left befor opening the new one.

Resources:

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

You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.

Answer 2

Without using JavaScript you're limited to using CSS transitions, where available. And while these are pretty impressive, they're not particularly great, so far as I've yet found, for conditional animation; they can basically animate from a starting point to another point and then back (based on the native browser events available in the browser itself), with JS you could add/remove additional classes and have the div elements move around to your heart's content, but not with 'just' CSS (though I'd love to be proven wrong on this).

The best I've been able to come up with, so far, is:

#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.

And this doesn't slide from the side (though you can do that if you want to) because it didn't look good, given the content re-reflow that was happening as the width of the element changed.

---

Edited because I think I may have misinterpreted a portion of the original question:

...I'd like without any javascript

That being the case, and the comment (below) seems to suggest that jQuery's an okay option, this might be worthwhile as a demonstration:

​$('#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.

References:

• animate().
• attr().
• [attribute="value"] selector.
• click().
• each().
• eq().
• index().
• not().
• removeAttr().

Answer 3

You could use the effects module from jQuery UI and use show('slide'). Look http://jsfiddle.net/HAQyK/1/

Answer 4

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

*// wizard is a div containing all your content

Answer 5

Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.

Here is the HTML part.

    <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>

Here is jQuery part in JavaScript function.

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

For hiding the arrows please looking here. Detect end of horizontal scrolling div with jQuery