Slide Elements in Different Directions

read 154 comments

Although jQuery has a nice set of slide methods — .slideDown(), .slideUp(), and .slideToggle() — sometimes we may want to slide an element in a different direction. Fortunately, it's pretty easy to do.

Reverse the Slide Direction

With the built-in slide methods, elements are shown by sliding them down and into view. But what if we want to slide something from the bottom up and into view? The trick here is to use some judicious CSS. Let's start with a simple HTML structure:

HTML:
  1. <div id="slidebottom" class="slide">
  2.   <button>slide it</button>
  3.   <div class="inner">Slide from bottom</div>
  4. </div>

To get the inner div to slide up, we'll anchor its bottom edge to the bottom of the bottom of the nearest positioned ancestor (in this case, the #slidebottom div):

CSS:
  1. .slide {
  2.   position: relative;
  3. }
  4. .slide .inner {
  5.   position: absolute;
  6.   left: 0;
  7.   bottom: 0;
  8. }

Other properties such as width, padding, margin, and background-color have been set for these elements, but only the essential properties for modifying the slide behavior are shown above.

Note: I'll be using the term positioned to refer to elements that have the CSS position property set to something other than "static." Both divs in this example are positioned — one absolutely and the other relatively.

Now, we can write the jQuery the same way we would with a traditional slide effect:

JavaScript:
  1. $(document).ready(function() {
  2.   $('#slidebottom button').click(function() {
  3.     $(this).next().slideToggle();
  4.   });
  5. });

Try it out:

Slide from bottom

Horizontal Slides

Animate Width

We can also slide elements to the left and right. The simplest way is to animate the element's width property.

JavaScript:
  1. $(document).ready(function() {
  2.   $('#slidewidth button').click(function() {
  3.     $(this).next().animate({width: 'toggle'});
  4.   });
  5. });

In this case it's not necessary for the sliding element to be positioned.

Animate this element's width

While animating the width is fine for what it is, I'm not crazy about how the text wraps as the width decreases. One way to avoid the wrapping is to add a CSS declaration such as white-space: nowrap;, but that would mess up the appearance of an element with a lot of text—one in which we would expect to see text wrapping when it is at full length.

Animate Left

Another way to avoid the text-wrap issue is to animate the element's left property. Here, it's important once again to make sure that the element is positioned. After all, we can't move an element if it's static.

With this animation, we need to calculate how far to move the element. The following code rests on two assumptions: (1) the sliding element has an outerWidth() that is equal to or greater than its parent element's width, and (2) the sliding element is initially set to left: 0;. You may have to adjust your code if either one of these assumptions doesn't hold in your situation.

JavaScript:
  1. $(document).ready(function() {
  2.   $('#slideleft button').click(function() {
  3.     var $lefty = $(this).next();
  4.     $lefty.animate({
  5.       left: parseInt($lefty.css('left'),10) == 0 ?
  6.         -$lefty.outerWidth() :
  7.         0
  8.     });
  9.   });
  10. });

Lines 5 through 7 use a "ternary" operator that basically says, "If the left css property equals 0, move the element to the left as many pixels as it is wide (including padding and border); if not, move it back to 0."

Animate this element's left style property

Also, if we want the element to be hidden when it slides to the left, we need to add overflow: hidden; to its parent element.

Animate Left Margin

Finally, we can achieve the same effect as the left animation by animating the marginLeft property. In this case, we still need overflow: hidden; on the parent element, but the sliding element does not need to be positioned.

JavaScript:
  1. $(document).ready(function() {
  2.   $('#slidemarginleft button').click(function() {
  3.     var $marginLefty = $(this).next();
  4.     $marginLefty.animate({
  5.       marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
  6.         $marginLefty.outerWidth() :
  7.         0
  8.     });
  9.   });
  10. });

For the sake of variety, we're sliding this one to the right.

Animate this element's margin-left style property

With a couple little tweaks, these horizontal slides can be used for a horizontal accordion.

Further Resources

comment feed

154 comments

  1. Nice use of the outerwidth() method! ;-) Excellent tut, keep it up!

  2. Great post Karl. Useful tips explained clearly. :)

  3. Awesome post! Was recently trying to do this for a project and figured out everything but the 'slide left' while anchoring the left side. Thanks!

  4. Nordes

    Great post. I will surely use those useful tips.

  5. This is great! A much needed explanation for a horizontal slide solution. Nice work Karl.

  6. It's great to see more posts on real scenarios. This is a truly helpful post for those new to the jQuery library. Great job!

  7. Great tutorial!

    How would I create a slide up/down for multiple divs on a page using a single function to execute any one div slide at a time?

  8. Rob

    Excellent, i was just looking at how to implment a sliding footer. Thanks ;-)

  9. Santo

    Could you provide the whole .js , css, and html files for your examples? I'd like to know all the details . Would be very helpful :)

  10. cool8jay

    How to run javascript and css in wordpress post?
    Using a plugin?
    Can someone tell me? Thanks!

  11. Good Example, nice collection of the sliding direction in one. Thank you

  12. Very good tut, I just knew about your this site and I think it rocks!
    Thanks to share it.

  13. Great stuff. We use JQuery and the various plug ins in our custom monitoring pages. It really makes our job easier.

  14. Wow super Method. ! Veri Good
    One Question:
    What Create PopUp Window?

  15. nice tutorial for a guy like me who just started learning jquery.thanks a lot

  16. Spen

    Hi Karl. Thanks very much for posting these methods. I am particularly happy with the last horizontal slide. I have got it to slide in from the right, but am stuck with the accordion method you mentioned. Any chance of a clue how to implement this please? Cheers!

    • Hi Spen, I'm hoping to write a new tutorial on creating a horizontal accordion within the next couple weeks. Feel free to remind me via email if I forget. ;)

      • Michael

        Is there a reason for vars in the format of $foo... its mildly confusing since the framework uses $ heavily

      • Hi Michael, there is nothing special about the $ in JavaScript, but it has become a convention in jQuery scripts to begin a variable name with it when the variable is referring to a jQuery object.

  17. Karsten

    Hi Karl, I'm a freshman just started learning jquery. Your examples are easy to understand but there is something I don't conceive: In your first example, the "Slide from bottom" the sliding div isn`t visible until you click on the button. This is exactly what I'm looking for!

    My problem is, in all my test with your code the sliding div is visible from the first time. Pleace could you explain why this happen? Thanks for your support! Karsten

  18. Netzi

    Hello. Thank you for this great tutorial. I like the slide in from the left most. But I can't figure out how to start with a hidden div that slides in from the left. All your examples start with a visible div. It would be awesome if you could tell me how I can get this working.

    Regards

    • Hi Netzi,
      If you're using the one that animates the left property, you could do this after line 3:
      $lefty.css('left', -$lefty.outerWidth())

      If you're using the marginLeft one, do this after line 3:
      $marginLefty.css('marginLeft', $marginLefty.outerWidth())

      • Ian

        Hi Karl,

        I couldn't get the jQuery solution to work, the slide effect just went crazy and kept sliding in from the left.

        I fixed it with a - slightly less flexible - CSS solution

        
        #slideleft .inner {
          left:-350px;
        }

        Where the value of the left property is the same as the width of the parent container.

        • Keith

          very new and having some trouble hiding the margin-left one, plugging in the code provided to hide the div from the start gives me a syntax error that I'm unsure how to fix. I also tried doing it in the CSS, like this:

          #slidemarginleft .inner {
          margin-left:-350px;
          }

          which does work, but only after the 2nd button-press... any guidance would be appreciated

        • Hi Keith,
          Can't really tell what's going on without seeing the problem. Could it be that your script is in the head and not placed within a document ready block? or is it referenced before the jquery core file? Grasping at straws here.

        • Keith

          thanks for the response - I'll see if I can be more clear :) - I have 2 divs sliding, one of which works perfectly - the "marginlefty" one does not.

          here is the code I used:

          
          $(document).ready(function() {
            $('#slideleft button').click(function() {
              var $lefty = $(this).next();
              $lefty.animate({
                left: parseInt($lefty.css('left'),10) == 0 ?
                -$lefty.outerWidth() :
                0
              });
            });
            $('#slidemarginleft button').click(function() {
              var $marginLefty = $(this).next();
              $marginLefty.animate({
                marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
                $marginLefty.outerWidth() :
                0
              });
            });
          });
          

          per the post above I tried to insert this code after the 3rd line to get it to be hidden at the start
          <code
          $marginLefty.css('marginLeft', $marginLefty.outerWidth())

          but it gives me a syntax error and I have no idea how to fix it, so I tried it using the CSS solution I wrote before - this worked to a degree, but slides out the wrong way on first click, then works properly on subsequent clicks...

        • I put together a little demo for you. View source to see what I did and use whatever you want:

          http://test.learningjquery.com/moreslide.html

        • Keith

          that did the trick - thank you very much !

          ...so much to learn :)

  19. Great tutorial indeed! Now how would i need to alter the code to have the "marginLefty" inner div to be invisible from the get go? And is it possible to alter the content of the hidden DIV with custom html data before sliding it out for overview? Any help will be much and much appreciated!

    Thank you so much!

  20. marshane

    Great post!!

  21. James

    Hi, please could someone let me know how i can use a standard text link instead of a button, and have that text link trigger the slide elsewhere on the site?

    I tried moving the button elsewhere, but it didn't work :(

    thanks for any help

    • its really simple to do so... Instead of the button use an anchor element with ur text in it and give it any id for example:
      use this at any place on ur page:
      Click me to slide the element
      and in the js call use $("#slide-handle").click instead of$("#slidemarginleft button").click
      hope that helps...

      • I couldn't get this to work, and I'm trying to do the same thing.

        The problem is it works great if I'm clicking a button with that certain inner div that I want to hide, but what I want to do is have a MOUSEOVER signal the DIV to fly in/fly-out.

        I've gotten the other method you wrote about, "slick-show" to work this way no problem. But what I really want is the div to come in from the right side when you mouseover a link and I'm frankly too much of a n00b to jQuery to understand how to look at this code and modify it to work. All of my experiments failed :p

  22. cincoutprabu

    The reverse slide (slide from bottom) approach doesnt work for all cases.
    Use the following animation technique to slide from bottom

    To slide-up-from-bottom (show):

    
    $('.inner').show();
    $('.inner').css({ height: '0px' });
    var height = 40; //set slide amount here
    $('.inner').animate({ marginTop: '-' + height + 'px', height: height + 'px' }, 'slow');
    

    To slide-down-from-top (hide):

    
    $('.inner').animate({ marginTop: '0px', height: '0px' }, 'slow', function()
    {
    	$('.inner').hide(); //hide after animation
    });
    

    For more, mail me....

  23. Patrick

    Karl - great post. This is exactly what I'm trying to do with one exception.. How do I slide with a background-image within the sliding div?

    I've it working in all but ie6.. ie6 lags in that I see it trying to redownload the bg image in my status bar even though it's refenced in the CSS. hex colors work fine.

    Thanks for your hard work!

    -P

    • I'm not sure, but could it have something to do with ie6 not caching bg images? I often put something like this in an ie6-only script:

      try {
          document.execCommand( "BackgroundImageCache", false, true );
      } catch( e ) { };
      
  24. This is great!
    I'm trying to use the Animate Left on hover.
    I get the slide out but I can't get my element to slide in again.
    What am I doing wrong?
    This is my code:

    
    $('.contentWrap').hover(function(){
    		var $lefty = $(this).find('.hover_link');
    		$lefty.stop().animate({left:-$lefty.outerWidth()},{queue:false,duration:500});
    	}, function(){
    		$lefty.animate({left:'0'},{queue:false,duration:500});
    	});
    
  25. Marcuss Zilgalvis

    Hey there, this is really good stuff tho ive got some questions.
    Is there any possible way to use the link button outside that div, for example like:

    Animate this element's margin-left style property

    click this button

    And those divs stand next to each other, button div on the right side, so that means i'd like to have the slide to slide in from the right side only when clicked, and not already on page reload.

    Any ideas ? :)
    Much appreciated in advance.

  26. Great tutorial!

    Two things:

    1.) Is it possible to start with the sliding div hidden and then slide left from the right side of the containing div when the toggle button is pressed?

    2.) Is it possible to make the toggle button slide with div? My setup is that there is a rectangular div that slides, but I would like the toggle button to be a 20px tag off the left edge of the sliding div so that it sticks out while the rest of the div is hidden.

    Thanks very much!

    • Brianne C

      Mort –
      I'm trying to achieve the same tab type effect on a site I'm developing. Have you had any success with your code?

      Thanks–
      BC

    • archie

      Hi Mort,
      Have you had any luck with your inquiry?
      Your request is exactly the solution I am looking for.
      Cheers
      Archie

    • Hi Mort (and Brianne and Archie).

      Wanted to let you know that I'm working on a new post that will explain how to do the fly-out menu thing. Should be ready within the next week or so.

      • Archie

        Hi Karl,
        Thanks for responding. How is the post coming?
        I'm sorry to appear so eager but I have been a frustrated 'cut and paste cowboy' all week stumbling around in the jquery darkness.
        Cheers
        Archie

        • Archie, it should be ready within the next week or so (give or take a couple days). In the meantime, take a look at this demo and let me know if it's what you had in mind.

        • archie

          Hi Karl,
          Sorry about my last query, I really did not want to appear impatient I was just excited to find your reply, and relieved by the prospect of finally putting my sliding tab problem to bed.
          The demo you mention is very good but a lot more complex that what I require.
          Ideally I would like a tab containing an arrow image that slides in from the right side of my wrapper div to reveal a 'contact details' div approx 75 px high and 300 px wide. The content I need inside the 'contact details' div is not in the form of an ul but simple para with links.
          I am looking forward to your reply and in the mean time I will try to dissect the demo into something I can use.
          Many thanks,
          Archie

  27. archie

    Excellent effort Karl,
    Thank you for sharing this resource!!!
    I too am looking for the same functions as Mort.
    Do you have any suggestions?
    Cheers
    Archie

  28. Wow very cool! could someone help me with Animate Width version i want to slide that one from right to left and then back from right to left. I kinda like it that you can see the text go smaller while it closes. thanks! gr. bram

  29. lnv

    Hi Karl,
    Thanks for these examples. I am trying to implement your marginleft slide but I need to target a particular div. I can't figure out how to do that with your code. Could you please help? Thanks!

    • lnv

      Got it. If anyone is interested the line to change to target a particular div is:
      var $marginLefty = $(this).next();

      Change it to something like:

      var $marginLefty = $('#yourDivID');

      You will need to change this if your triggering anchor appears AFTER your sliding div in your code.

  30. great post!!

    however, is it possible to have a slide down to hide an already visible item?

    here you start with the item already hidden, then slide it "up" to reveal it. using slideToggle is a natural way to acheive this since it slides up to reveal

    but what if your item is already showing? how would you slide it "down" to hide it?

    thanks!

    • As long as you have the CSS defined correctly (using the bottom property and setting position to relative or absolute), all you need to do is use the .slideUp() method. Just don't hide it initially.

  31. Thanks for the great tip. It worked like a charm.

  32. Cookies anyone? Has anyone here considering how to make this integrated with cookie?

  33. This is great! A much needed explanation for a horizontal slide solution. Nice work

  34. nice post....
    how to make image slide with jquery..?

    bali web programmer

  35. Prathap

    Hi, nice tutorial but can you kindly guide me how to implement an auto slide from left to right.

    when the ul or div content is loaded, at certain time the slide should appear on top with the caption from left to right and disappear for the next slide.

    Thanks( waiting for someone to reply)

  36. Deepak

    Hi Karl,

    Great post . . . thanks a lot.
    I implemented the same thing, but instead of a button to trigger the slide, i have used an image with the onClick event, calling a javascript function to change the image on click . The image shown is to be toggled on every click to indicate the change in direction . . . It works great in firefox... The problem i am facing is that in IE6 , the first time i click the image , the image changes indicating change of direction, but the slide doesnt work. From the second click onwards, the slide starts working fne, but because it failed for the first click, the image shown is each time the opposite of what it needs to be . . . . any idea how this could be fixed.
    I alos used a button instead of an image as you have shown, , and the even the first button click doesnt make it slide . . .

  37. adrianaleites

    hi! my page have a main div with width:960px. This div contains 5 divs (columns) with float:left... the first one is hidden. And i want to slide this hidden div when click a link. It works fine using this script:

    jQuery.noConflict();
    jQuery(document).ready(function() {

    var showText="Show image";
    var hideText="Hide image";

    jQuery('#column1').hide();

    jQuery("#link").click(function(){
    jQuery("#column1").animate( { width:"toggle"}, 1500 );

    if (jQuery('#link').text()==showText) {
    jQuery('#link').text(hideText);
    }
    else {
    jQuery('#link').text(showText);
    }

    });

    });

    The problem is that when i click the link "Show image", the rest of the columns are pushed down to the page bottom. I just want the others divs to slide out of the page to right, or hide or something!
    I already tried it to hide the other columns, but with no results:


    jQuery.noConflict();

    jQuery(document).ready(function() {

    var showText="Show image";
    var hideText="Hide image";

    jQuery('#column1').hide();

    jQuery("#link").click(function(){
    jQuery("#column1").animate( { width:"toggle"}, 1500 );
    jQuery("#column2", "#column3", "#column4", "#column5").hide();

    if (jQuery('#link').text()==showText) {
    jQuery('#link').text(hideText);
    }
    else {
    jQuery('#link').text(showText);
    }

    });

    });

    If anyone got any idea to put this working fine, please give me some tips.
    Thanks in advance.

    • adrianaleites

      Problem solved! Isn't the perfect transition i was expecting for but at least it works.


      jQuery(document).ready(function() {

      var showText="SHOW IMAGE";
      var hideText="HIDE IMAGE";

      jQuery('#column0').hide();

      jQuery("#link").click(function(){
      jQuery("#column0").animate( { width:"toggle"}, 1500 );
      jQuery("#columns").animate( {width:"toggle"}, 1500);

      if (jQuery('#link').text()==showText) {
      jQuery('#link').text(hideText);
      }
      else {
      jQuery('#link').text(showText);
      }

      });

      });

  38. max2474

    hmm...cant post

    • max2474

      ok....seems to be when you post site info..odd. anyhow....

      Just wanted to say thanks for the info, has managed to get me further than any similar tutorial.

      Have come across an oddity though. lmao - trying to eplain without giving site info will be interesting.

      In the last example on this page (slide right), using the code given in the reply to comment 9 -
      http examples learningjquery com slide - (insert as needed) you need to click twice to get the slide to work. Not much to look at, but you can see here - max2474 DOT pcriot DOT com SLASH slide DOT htm - no www's.

      Hope this makes sence, is my 9th attempt to comment!

      Please help if you can, either way, thanks for helping me get this far :)

      • So sorry you were having problems posting your comments! They didn't even arrive as spam on my end. Probably stopped by the web host. They're ultra-tight on security, so they sometimes lock down stuff that should be let through.

        Anyway, I went to the page you referred to in your comment, but I didn't experience the same problem as you. The slide worked on the first click for me. Which browser (and version) are you using? Maybe that has something to do with it.

        • max2474

          Very peculiar. Seems to be an issue with Internet Explorer 8, although some odd effects on some others. "Opera" + "Google Chrome" worked perfectly. Firefox cant load the video, Safari cant load the music, and IE8 you have to click twice on.

          Not worried about the video or music ATM as this wont be end content, but if you can help with the double click on IE8, would be a huge help.

          Which browser do you usually use btw?

  39. Very nice and useful tutorials for web designers,
    Thanks for posting.

  40. James Albuquerque

    Anyone can tell me how do I make it slide in after a certain time without clicking?

  41. Folkert

    Thanks for this article, it is exactly what i was looking for. But is do also have a question. I did change your code to make it play when mouseover. this works perfectly in firefox and the one wich is sliding to the right, does work perfectly in ie and chrome also, but, the one wich is sliding to the left, does has some trouble. the first time that you move your mouse over the button, notting happens, then when you remove the mouse from the button, it slides, and than when moving the mouse back on the button, it slides back. this has to be exactly in the other direction, like it does in firefox. When i move the mouse quickly over the button, the effect turns and it is ok, but that is not wat i want.

    My English isn't very good, because im dutch, but i hope you know what i mean...

  42. Thanks, Karl! Helped me out real good!

  43. Hi Karl,

    One more thanks for your post !

    A French web programmer.

  44. SanderSan

    Hey GREAT tut! One question, I've got things working but my div (which slides from the bottom up) starts visible; so the div which slide in is visible!? When I click it disappears... etc. But how do I hide it when I open my page?

  45. rocky

    Hi,

    thx for this great tutorial
    i just have one question, how do i put the sliding elements next to the button?
    as an illustration:
    [button] ---[and here's the sliding elements]---

    cheers!

  46. Edwood

    Hey guys,
    I'm rather new at this so I'll just ask.
    Can anybody provide me with a working sample page for the horizontal slide from left?
    I can't seem to get any of this to work.

  47. Awesome tutorial. Keep up the good work!

  48. terryh

    I'm hoping you might be able to point me the correct direction. On this site, what I want to do is have this slider work as a menu, for each menu item slide in a new page content. Right now if you look it has your button and only works for one content item. How can I make a menu that is not a toggle button but regular menu to change the page content. Each new button pushed, slide close the current content and open the new one. Any pointer would be good. I'm kind of a novice.

    Right now I have the button bring in content.

    outermotions.com/index-3.php

    • TerryH

      BTW, I do use javascript to do menus to swap the conternt out but this arraqngement, I'm mnot sure how to accomplish the same thing.
      Thanks

    • TerryH

      I have figured out how to make the menu with 5 menu items that replace the content of the page.
      HOWEVER... Does anyone have any ideas how to close whatever menu page (actually content) you are on before it opens a new one when new menu item selected?
      Here is a page to look at:

      outermotions.com/index-5.php

      Hope someone has a way to do this...
      Regards

  49. rezvan

    Hi,thanks for great tutorial ,I want to put button in front of div and slide both together ,what should I do?

    • TerryH

      I don't think there are any answers here...... Great tool for singular item use. Multiple use is a whole new can of worms. I'm curious why developers put such effort into a page then leave all the questions hanging. I respect the work put into this item. Every site I go to with tools like this just give one singular example when its not used that way that often. You try to use it with multiple items on same page and it steps all over itself. Thanks anyhow guys, it helps make me smarter.

      • Terry,

        You're right, in a sense, that a lot of these tutorials are not meant as copy/paste, general-use examples. They're meant more as a starting point or an explanation of a concept. With jQuery, you'll find many plugins that provide the plugin-and-play functionality that people here are looking for.

        As for leaving questions hanging, please consider that I've written over 60 posts on this blog -- all in my spare time. On this one alone, I've responded to comments 14 times. So, while I appreciate your frustration, I hope you'll also appreciate the overwhelming magnitude of the task of responding to so many comments.

        I suppose I can do as some other blogs do and close comments after a certain amount of time. However, my hope is that others reading the comments might see a question that they can answer and take it upon themselves to reply. Otherwise, the jQuery forum is always a great option for getting help.

        • TerryH

          The jQuery forum is useless. No one answers anything.
          This example is proving impossible to alter so it can do more than the simplistic example shown. To many variations from making it modular. Too simplistic to adapt to other uses. (unless your an expert, which I'm not) Guess I'll trash my idea. I have seen no pages with what I'm trying to do . I could probably use this except the snafus of the button used, (how to use it with any link), I don't see where you used the button in the js and how to replace it with something else. This is too contained for the one simple example. I live in a place where there are no coders to talk to so forums are my only source. Finding few answers. or examples that are alterable without a complete rewrite.

          http://outermotions.index-7.php is my current working page with just the slide working.

          its been fun

        • Hi Terry,

          It kind of looks like you're over-thinking this. I took what you had on that page and cleaned up the HTML and CSS a bit. Then I added a modified script. Hope it helps get you going in the right direction:

          http://test.learningjquery.com/outermotions.html

        • TerryH

          I greatly appreciate your help. I tried so many things. Sorry for being frantic. This will definitely get me over the hump. I still have a lot to learn.
          The page is a little sloppy because of trying so many things. The actual look will come when all of the issues are working.
          Thanks you Karl.

        • No prob, Terry. Glad to help.

  50. Mohd

    hi all,

    i wonder how to put close button in the slide??

    after i klik "Show Slide" button, the slide slide-up from bottom..then i want to close the slide using new "close" button inside the slide without clicking the "Show Slide" button again..

    anyone know how to put this "close" button inside the slide so it can close the slide??

    thanks,

    • I know this is old, but I figured this one out and thought I would post just in case anyone else is looking for the solution here. This is what I did.

      Class each button, be it open or close/ Leave the open/toggle as it is, but add another function that will close the 'parent' div of where the close button is located, which was originally the 'next' element that the first function opened. See the code below for a better idea of what I mean. It may not be the best solution but it works. Hope it helps someone.

      HTML:

      slide it
      slide itAnimate this element's margin-left style property

      Jquery:

      $(document).ready(function() {
        $('.slidemarginleft button.open').click(function() {
          var $marginLefty = $(this).next();
          $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
          });
        });
          $('.inner button.close').click(function() {
          var $marginLefty = $(this).parent();
          $marginLefty.animate({
            marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
          });
        });
      });
  51. Jamie

    hi Karl, and thankyou for providing such a great tutorial.

    is it possible to have the slide effect animate on page load (instead of a click button)

    so as soon as the page opens the text will slide out automatically

    thanks in advance for your time

    J

    • Hi Jamie,

      Sure, it's possible. Instead of putting the animation inside of a click handler, put it inside of document ready or window load. For example:

      $(document).ready(function() {
        $('some-element').animate( /* put animation args here */);
      });
      

      or:

      $(window).bind('load', function() {
        $('some-element').animate( /* put animation args here */);
      });
      
      • Jamie

        ahh, thankyou for that, very much appreciated :)

        • Jamie

          hi again Karl

          i have done this here

          
          $("#first,#second").ready(function() {
          	        $('#first').animate({opacity:1, left: "0"}, {duration: 'slow', easing: 'easeInOutExpo'});
          	        $('#second').animate({opacity:1, left: "0"}, 2000);
          });
          

          with some additional css of cause, and it works just like yours, when the page opens the 2 divs slide out one after the other.

          but it still does not quite look the part, i want to create a flash like effect, so i figured i need to fade the text in a little too, i wrapped the text in a .content and added this


          $('.content').delay(800).fadeIn(400);

          but that did not work.

          the effect i'm aiming for is like on http://www.sebcreation.com/en/#home on the h1,h2 elements when the page opens.

          i'm right with the css bit, just the animations has got me beat.

          thanks again for your time, you are a great help and i will be sure to give you credit if i use the script on a theme or something.

          J

      • LouieT

        I would also love to get the animation to happen on window load or document ready. Afraid I don't understand the post explaining this, could you spell it out or link to an example? thanks much for this!

  52. http://www.bigideaadv.com/cradle_site/

    That's the site I am using this awesome bit of code on. The sliding left to right for the rightmost pane blinks when it animates. I don't know why. Can anyone provide any insight? I've provided the jQuery code below...

    $(document).ready(function(){

    $("#main_window #panel1").click(function(){
    $("#main_window #panel1").animate({
    width: parseInt($("#main_window #panel1").css('width'),790) == 35 ?
    -$("#main_window #panel1").outerWidth() : 870
    });
    if($("#main_window #panel2").css('width') != '35px') {
    $("#main_window #panel2").animate({width: '35px'});
    };
    if($("#main_window #panel3").css('width') != '35px') {
    $("#main_window #panel3").animate({width: '35px'});
    };

    });

    $("#main_window #panel2").click(function(){
    if($("#main_window #panel1").css('width') != '35px') {
    $("#main_window #panel1").animate({width: '35px'});
    };
    $("#main_window #panel2").animate({
    width: parseInt($("#main_window #panel2").css('width'),790) == 35 ?
    -$("#main_window #panel2").outerWidth() : 870
    });
    if($("#main_window #panel3").css('width') != '35px') {
    $("#main_window #panel3").animate({width: '35px'});
    };
    });

    $("#main_window #panel3").click(function(){
    if($("#main_window #panel1").css('width') != '35px') {
    $("#main_window #panel1").animate({width: '35px'});
    };
    if($("#main_window #panel2").css('width') != '35px') {
    $("#main_window #panel2").animate({width: '35px'});
    };
    $("#main_window #panel3").animate({
    width: parseInt($("#main_window #panel3").css('width'),790) == 35 ?
    -$("#main_window #panel3").outerWidth() : 870
    });
    });

    });

  53. Framboos

    Hello there!
    Could anybody help me out how to get the following example working? I found this link in the comments, it's almost exactly what I want, but I would want it to slide in from the left side.
    http://test.learningjquery.com/moreslide.html

    So I want to start with a hidden div, and use the button to slide it into view, from the left side.

    Thanks in advance!

  54. Framboos

    Oh! Nevermind my last comment. Continued trying out some things and got it to work, posting it here if anybody else needs it:
    http://dl.dropbox.com/u/1508804/moreslide_hidden_left.html

    Thanks for the great articles on your website! Very helpful :)

  55. Glen

    Hi,

    I want to slide from right to left but width of the sliding panel is less than the main window. How can i do that? Anyone please help.

    Thanks in advance.

  56. marilynn

    This was extremely helpful and straightforward. Thank you for posting it. I tried modifying it and ran into a problem. I created an image with the id "gsPic" which is inside a div called "getStarted." When I click on the image I want the div to move, but it doesn't do so. I can replace the gsPic reference with any other element in the document and it works fine, but not that image inside the div. Is there a special way to refer to elements inside the div I want to move?

    
    $(document).ready(function() {
    	$('#gsPic').click(function() {
    		var $righty = $('#getStarted');
    		$righty.animate({
    			 right: parseInt($righty.css('right'),10) == -620 ?
    			 -$righty.css('right') == 0 :
    			 -620
    		});
    	});
    });
    
    • Hi Marilynn,

      Not sure what's up with the image thing. Maybe try setting it to display: block;.

      Looks like the line, -$righty.css('right') == 0 :, should just be 0.

      If you put a simplified test case on jsfiddle.net, I'll try to take a look at it for you.

  57. Martin

    I want to slide and animate a div in a diagonal fashion, ie from right to left AND top to bottom in the same time when I click a link. And then slide it back the same way. Is that possible and how do I do that?

    Thanks in advance,
    Martin

  58. Alex

    Hi Karl,
    Great tutorial! Thanks!

    Is it possible to slide the inner element but that it doesn't fully hide, just sticks a bit on the left?

    To visualise what I mean the starting state would be (a number of pixels of the inner slide can be seen on the right):
    [____#]
    And after clicking (it's fully visible):
    [#####]

    Thanks very much in advance :)

  59. Thanks man. That's just what I was looking for. I am building a new template in joomla 1.6, and since there aren't many sources about the new joomla, I have decided to create the template from scratch and needed to create submenu and sub sub menu animations. This is just perfect.
    Cheers!

  60. Luke

    Great post, I wish I could make the most of it!!

    I’m trying to make a nice elegant and simple portfolio using a little bit of jquery.

    I’ve tried learning the code but am really suffering with it.

    Here is the page

    I want to have a sliding div come in from screen-right when the user clicks on one of the menu links on the left. Ideally I would like to have each sliding div load an external html page inside (this is to make it easier for me to at content later on, on a separate html template I will make).

    Here is a sliding div to show you what I mean (I couldn’t get rid of the select drop down menu).

    One of my main issues is how to get multiple triggers and corresponding div – this being because I am way over my head with the language. I’ve been trying to learn it but really don’t have the time to learn it all just for one effect.

    Thanks you so much,
    Luke

  61. Mint Chan

    Hi there!

    Great tutorial and stuffs! i played around for a bit and realize the slide up from bottom isnt working for mine, I don't know whats wrong, the inner is shown visible from the start :), is there anyway that I could make it hide in the initial stages?

    Just wondering, can this slide work in mobile devices? :D, btw im using vs2008, was puzzled why this cannot work but works fine in this website!

    Need guidance please :)

    Mint

  62. Chris Bradbury

    Hi Karl

    Firstly, thanks for taking the time to provide the rest of us with tutorials, and secondly thanks for giving follow up support.

    I was wondering how I might use the first example (slide from bottom) slightly differently. I want it to be partially visible, but then slide up when a button is clicked. I've tried a few things to achieve this but couldn't get it working.

    Hope you can help.

    Thanks
    Chris

    • Hi Chris,

      Let's say you have an element with a class of "footer," a toggle link, and the following CSS:

      .footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 22px;
      }
      

      You could animate the footer like this:

      $(document).ready(function() {
          var footer = $('div.footer'),
              dir = '+=';
          $('a.toggle').bind('click', function(event) {
              event.preventDefault();
              if (footer.height() == 22) {
                  dir = '+=';
              } else {
                  dir = '-=';
              }
              footer.animate({
                  height: dir + '120px'
              }, 700);
          });
      });
      

      I put together a little demo for you on jsfiddle.

      • Chris Bradbury

        Hi Karl,

        I've been away since Friday morning and have just seen your reply. Thanks a lot for taking the time to provide the demo, much appreciated!

        Cheers
        Chris

        • MIke

          Hey Karl

          I'm trying to do something very similar to this and checked your code on http://jsfiddle.net/DrDrd/150/ but it doesn't seem to be working for me.

          Here's my code, and I am loading jquery-1.7.1.js

          [IMAGE PATH ]

          toggle

          I'm a footer!

          $(document).ready(function() {
          var footer = $('div.slideupinfo'),
          dir = '+=';
          $('a.toggle').bind('click', function(event) {
          event.preventDefault();
          if (slideupinfo.height() == 30) {
          dir = '+=';
          } else {
          dir = '-=';
          }
          slideupinfo.animate({
          height: dir + '220px'
          }, 700);
          });
          });


          .slideupinfo {
          background-color: #60c4f8;
          position: relative;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 30px;
          text-align: center;
          color: #fff;
          overflow: hidden;
          }
          .slideupinfo div { padding-top: 22px;}
          .toggle {
          position: relative;
          display: block;
          width: 50px;
          text-decoration: none;
          top: 2px;
          left: 50%;
          margin-left: -25px;

          }​

  63. Herman

    It's a neat trick and I've used it myself before, but it's not a perfect solution.

    I'm trying to do an image replacement where one image slides up from the bottom to replace another, the two images are very similar (the same text in different colors)

    The problem with this method is that it doesn't reveal the image gradually from bottom to top, it just slides it up. With the slideDown method, when the animation is 50% complete, only half of the image is visible, cut off in the middle. With this method, at 50%, the entire image is visible and the top edge of the image is half way to the top of the outer div.

    I haven't been able to solve this yet so if anyone has any ideas...

  64. I want this slider to start closed...

  65. sue

    Hi,

    In jQuery how can I create at the time the document opens, a line of text dropping (without clicking on anything) fall from the top of the screen down to a specified spot on the page and stopping?
    And then repeating this same effect two more times with two more words dropping/sliding down and stopping in consecutive order?
    I am a complete beginner, please advise because I don't even know how to begin writing some code for this type of effect and/or animation. Thanks for any advice.

  66. This is really great stuff. Is there a way to have it slide into view from right to left from the right side of the page? Can't quite figure out how to do that.

    :)

  67. This is a perfect post, this is exactly what I wanted to do for my website, but was unable to figure out why the elemenets shifted the page around. I guess all along the key was in the positioning of both the inner and outer divs.

  68. John

    Hi, Karl
    First, thanks for your tutorial.
    I have met a problem with this kind of effects.
    Traditional slide from up to bottom acts like this: erase the bottom first and then go up.
    Is there any way that I can erase the top first and then to the bottom?
    Thanks for your reply in advance

  69. Very nice script. I like that even after using jquery the sliding content is crawlable by search engines. Thanks for sharing.

  70. Thanks much Karl, this post helped me out a bunch! Keep up the good work dude!

  71. Ashin

    All These guys are the kings of jquery.. Great to see all of you posting here.. And great tips.. I too will become like u people shortly :)

  72. Jhon

    There is some way to do it from center ? Make one div appear like a point in center and grow fast from there filling viewport ?

  73. James

    Sorry to bother you, but I'm new to jquery and I was wondering how I could select a div that's not right after the button. Since you use the below code.
    var $lefty = $(this).next();
    And I would like to select a div that's within another div to have that effect.

  74. Nico

    is it possibile to start with hidden div and then animate from left to right?
    I have see the examples qith the animation from right to left, how i can invert this?

  75. Hey Karl, Thanks for the steerage with the slider it works great ! I have a question .. I am a JS newbie so be gentle !!... How would I animate the slider so it is initially open when the page loads then closes itself (without a click) after a few seconds with all other functionality working as normal ? I've tried lots of ways to make this happen (on the mentioned dev site submitted as my URL on this form) but no joy .. my face is hurting now. Any additional help would be awesome .. thanks in advance.

  76. Geo

    I noticed the same problem with Internet Explorer where you have to click the button twice before it executes the function within the click event. Oddly enough this problem doesn't seem to exist on this web page.., but if I copy and paste the source code into my page, then the problem is there? Does anyone know what it might be? As much as I would like to blame the IE for its shortcumings, I have to say this finger can also be pointed towards the the JQuery, because it was supposed to be cross-browser compatible and there is something they missed in their design.

  77. Just a suggestion for anyone who wants to toggle div from hiden --> slide to right:
    In the css, I have to set the .inner div to {float:right;}, and the code is:

    
    $(document).ready(function() {
    	   	var $marginLefty = $('#yourdiv');
    	  	$marginLefty.css('marginRight', $marginLefty.outerWidth());
    	   	 $('#yourbuttonid').click(function() {
    	   		     $marginLefty.animate({
    	   		      marginRight: parseInt($marginLefty.css('marginRight'),10) ==                       $marginLefty.outerWidth() ? 0 : $marginLefty.outerWidth()
    	   		    });
    	   		  });
    	     });    
    • Brain

      Hi Wallern, I need your expertise I was trying to do same thing like it's shown in first example i.e slide something from bottom up and into view. But I want the button slide along with inner div Something exactly like done in http://www.masters.com/en_US/ .... in Feautred Videos. Please help.

  78. Thanks Wallern. Your example is exactly what I was looking for.

  79. Brain

    Hi Karl,

    Thanks for this wonderful tutorial. I was trying to do like you showed in first example i.e slide something from bottom up and into view. But I want the button slide along with inner div Something exactly like done in http://www.masters.com/en_US/ .... in Feautred Videos. Thanks in advance.

  80. Rooven

    Hi, it's what i'm was looking for, but can i use callbacks with this functions? sorry, i'm a jquery newbie

  81. kirti

    thanks a lot...... here i got exactly the same for what i m looking for. I used slide up div from bottom. It working nice with ul li also but only last ul li working with 4 or 5 succesive clicks other ul li menu are working fine.

    I used seperate coding for each ul li item but with same basic structure. How it can be fixed.

  82. kirti

    My code works in FF and Crome but not working in IE6. How it can be solved.
    Thanks in advance

  83. Karl,

    I have attempted to implement the slide left and it failed. So I copied your entire page from your above reply and none of the slides work. I can make them work on a html page but I cannot make them work on an .aspx page.

    The symptom is that when you click the button the green area slides about 30-50 pixels and then returns to its original position. I have uploaded both an html and aspx version of the page to my web site. http://www.redskywebdesign.com/sliders.aspx and http://www.redskywebdesign.com/sliders.html

    Do you know of any problems in this area? Any suggestions?

    Any help would be gladly accepted and appreciated.

    • Hi Andy,
      Add an event parameter to the click handler function, and then inside that function, write event.preventDefault();. So, the first example that you have there will look like this:

      
       $('#slidebottom button').click(function(event) {
          event.preventDefault();
          $(this).next().slideToggle();
        });
      

      It looks like your .aspx page is wrapping everything in a form element, so it's treating those button clicks as form submissions.

  84. Hello!

    This tutorial with the horizontal slide codes was PRECISELY what I have been looking for for weeks now.

    Dat wuz duh fo shizzy ma nizzy! ( still not okay for white people to speak 'Snoop' ? ? )

    Regardless of my lame attempt at humor, thanks for post this tutorial.

    /Brian

  85. Jon

    Hi Karl,

    How difficult would it be to adapt the left style animation example to mimic iPhone sliding mechanisms? In other words, click one of 3 buttons, and whatever div is showing slides left; replaced by another div sliding left (from the right).

  86. Anna

    Hi! I was wondering if it was possible to animate an element automatically, without the use of a button?

  87. Jen

    Thanks for this post!

    Would it be possible to control what would be hidden in the .inner div? Like for ex. an image with text, and I just want the text to be hidden when clicked on slide?

  88. Le Qc Nam

    Its no working on IE9

  89. Roman

    !!!! IMPORANT !!!!
    How can I use this code without including jquery?
    Please help if it works without it. Igratitude to you.

    $(document).ready(function() {
      $('#slidemarginleft button').click(function() {
        var $marginLefty = $(this).next();
        $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
            $marginLefty.outerWidth() :
            0
        });
      });
    });
    </script

    slide it

    Animate this element's margin-left style property
  90. santiago

    Hi, im trying to follow the first example. but my html is something like this

    i want to click li QS and when its clicked to slide the div QSOMOS.

    but im not being able to get that working, could you give me a tip ?

  91. Andrew

    Is there a way of having having a second button on the sliding div? My sliding div slides up and covers the original button and therefore I need something inside the div to slide it back down again. I'm a bit stuck...

    Great site though!

  92. I found a good example of using the jQuery animate function here.

    http://lofthou.se/2011/03/horizontal-sliding-panel-v2/

8 Pings

  1. [...] Slide Elements in Different Directions (Karl Swedberg) [...]

  2. [...] Slide Elements in Different Directions » Learning jQuery - Tips, Techniques, Tutorials (tags: tutorial jquery animation) [...]

  3. jQuery - Efeito corrediço em diferentes direções...

    Embora a biblioteca jQuery tenha nativamente seus métodos para obtenção do efeito corrediço — .slideDown(), .slideUp() e .slideToggle() — em algumas ocasiões pode ser necessário criar o efeito em uma direção diferente daquela dispon...

  4. [...] Jquery is truly a heave for Jquery lovers. You can easily learn how to create animations using Jquery and much more advanced Jquery [...]

  5. [...] See the article here: Slide Elements in Different Directions » Learning jQuery – Tips, Techniques, Tutorials [...]

  6. [...] Jquery is truly a heave for Jquery lovers. You can easily learn how to create animations using Jquery and much more advanced Jquery [...]

  7. [...] Slide Elements in Different Directions » Learning jQuery - Tips Feb 6, 2009. Is it possible to start with the sliding div hidden and then slide left from the right side of the containing div when the toggle button is Slide Elements in Different Directions » Learning jQuery - Tips [...]

  8. [...] Slide elements in different directions This entry was posted in Code and tagged animation, jQuery. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. « Adding snippets to Zen Coding in Notepad++ [...]

Sorry, but comments for this entry are now closed.