26

I need for a div tag to slide out on the right side of the screen, how do I get this effect with jQuery? I've been looking here: http://api.jquery.com/category/effects/sliding/ and it doesn't seem to be what I'm looking for...

Ben
  • 60,438
  • 111
  • 314
  • 488

2 Answers2

49

If you're willing to include the jQuery UI library, in addition to jQuery itself, then you can simply use hide(), with additional arguments, as follows:

$(document).ready(
    function(){
        $('#slider').click(
            function(){
                $(this).hide('slide',{direction:'right'},1000);

            });
    });

JS Fiddle demo.

Without using jQuery UI, you could achieve your aim just using animate():

$(document).ready(
    function(){
        $('#slider').click(
            function(){
                $(this)
                    .animate(
                        {
                            'margin-left':'1000px'
                            // to move it towards the right and, probably, off-screen.
                        },1000,
                        function(){
                            $(this).slideUp('fast');
                            // once it's finished moving to the right, just 
                            // removes the the element from the display, you could use
                            // `remove()` instead, or whatever.
                        }
                        );

            });
    });

JS Fiddle demo

If you do choose to use jQuery UI, then I'd recommend linking to the Google-hosted code, at: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

David Thomas
  • 249,100
  • 51
  • 377
  • 410
14

Another solution is by using .animate() and appropriate CSS.

e.g.

   $('#mydiv').animate({ marginLeft: "100%"} , 4000);

JS Fiddle

charisis
  • 1,732
  • 14
  • 14
  • That doesn't appear to be working in my example.... http://jsfiddle.net/Webnet/DtzAw/ – Ben Nov 19 '10 at 21:36
  • @Webnet: but in the [example you link to](http://jsfiddle.net/Webnet/DtzAw/) (in your previous comment), you don't appear to be calling [`animate()`](http://api.jquery.com/animate/) at all. – David Thomas Nov 19 '10 at 21:41
  • Sorry, it didn't link the correct revision.... http://jsfiddle.net/Webnet/DtzAw/1/ – Ben Nov 19 '10 at 21:54
  • @Webnet, the item you're trying to animate, using `marginLeft` is `position: fixed;` which means it effectively *doesn't have a **margin** to animate*. Try using `right` instead, [demo at JS Fiddle](http://jsfiddle.net/Webnet/DtzAw/). – David Thomas Nov 19 '10 at 22:05