jQuery: Slide left and slide right

Question

I have seen slideUp and slideDown in jQuery. What about functions/ways for sliding to left and right?

You can simply do an `animate({width: 0})` then set position right or left for it to look like sliding right or left. — Max Shawabkeh, Mar 09 '10 at 18:13

score 76 · Accepted Answer · answered Mar 09 '10 at 18:03

76

You can do this with the additional effects in jQuery UI: See here for details

Quick example:

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);

answered Mar 09 '10 at 18:03

Nick Craver

623,446
136
1,297
1,155

This seems to be dependent on **Effects Core**, isn't there way to achieve this without any external stuff? – Sarfraz Mar 09 '10 at 18:07
@Sarfraz - Not that I know of, then you're reinventing the wheel anyway...one note that may be helpful, keep the direction the same for hide/show, it's the direction it comes from or goes to...it's somewhat counter-intuitive that it's the same, but you get used to it. – Nick Craver Mar 09 '10 at 18:08
@Sarfraz - You can try and pull the pieces you need if you want, lots of effort though, start here if you're going down that route: http://code.google.com/p/jquery-ui/source/browse/branches/dev/effects/ui/effects.slide.js?r=2454 – Nick Craver Mar 09 '10 at 18:10

score 22 · Answer 2 · edited Nov 20 '16 at 11:56

22

If you don't want something bloated like jQuery UI, try my custom animations: https://github.com/yckart/jquery-custom-animations

For you, blindLeftToggle and blindRightToggle is the appropriate choice.

http://jsfiddle.net/ARTsinn/65QsU/

edited Nov 20 '16 at 11:56

Peter Mortensen

30,738
21
105
131

answered Sep 16 '12 at 12:54

yckart

32,460
9
122
129

2

Thanks for these awesome functions.. I was looking for easy things like this forever. And it works like a charm. – Vincent Vieira Sep 16 '13 at 14:48
when i want to do that the console says me `Uncaught TypeError: Object [object Object] has no method 'blindLeftToggle' ` – Feb 20 '14 at 16:06

score 6 · Answer 3 · edited Nov 20 '16 at 11:56

6

You can always just use jQuery to add a class, .addClass or .toggleClass. Then you can keep all your styles in your CSS and out of your scripts.

http://jsfiddle.net/B8L3x/1/

edited Nov 20 '16 at 11:56

Peter Mortensen

30,738
21
105
131

answered Oct 30 '13 at 19:42

Davidicus

716
6
16

score 0 · Answer 4 · edited Jan 09 '19 at 11:47

This code works well :

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(document).ready(function(){
            var options = {};
            $("#c").hide();
            $("#d").hide();
            $("#a").click(function(){
                 $("#c").toggle( "slide", options, 500 );
                 $("#d").hide();
            });
            $("#b").click(function(){
                 $("#d").toggle( "slide", options, 500 );
                 $("#c").hide();
                });
            });
        </script>
        <style>
            nav{
            float:left;
            max-width:300px;
            width:300px;
            margin-top:100px;
            }
            article{
            margin-top:100px; 
            height:100px;
            }
            #c,#d{
            padding:10px;
            border:1px solid olive;
            margin-left:100px;
            margin-top:100px;
            background-color:blue;
            }
            button{
            border:2px solid blue;
            background-color:white;
            color:black;
            padding:10px;
            }
        </style>
    </head>
    <body>
        <header>
            <center>hi</center>
        </header>
        <nav>
            <button id="a">Register 1</button>
            <br>
            <br>
            <br>
            <br>
            <button id="b">Register 2</button>
         </nav>

        <article id="c">
            <form>
                <label>User name:</label>
                <input type="text" name="123" value="something"/>
                <br>
                <br>
                <label>Password:</label>
                <input type="text" name="456" value="something"/>
            </form>
        </article>
        <article id="d">
            <p>Hi</p>
        </article>
    </body>
</html>

Reference:W3schools.com and jqueryui.com

Note:This is a example code don't forget to add all the script tags in order to achieve proper functioning of the code.

jQuery: Slide left and slide right

4 Answers4

Linked

Related