Sliding divs horizontally with JQuery

问题:

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 horizontally from left to right, and slide out of view when clicked again. I know I need to use slide toggle effect but I'm having trouble implementing it in a way that each individual link causes a different div to slide... I've attempted to tweak a few jsfiddles I've found via google searches but I'm pretty lost when it comes to javascript.

So far this is the only fiddle I've been able to tweak successfully... http://jsfiddle.net/bridget_kilgallon/HAQyK/
but those slide vertically, and load all the divs when clicked.

Here's a fiddle I've created for the pagelayout I'd like without any javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/

Please help! :) -Bridget

回答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.

回答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().

回答3:

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

回答4:

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

回答5:

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

*// wizard is a div containing all your content