jQuery .slideRight effect

Question

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

Cardioid

Slide off the screen to the right, or simply to the right edge of the screen? – Brote

Slide actually off the screen – Cardioid

Answer 1

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

Brote

I'm trying to stay away from the jQuery UI – Cardioid

Answer 2

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

e.g.

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

JS Fiddle

Brisbane

That doesn't appear to be working in my example.... jsfiddle.net/Webnet/DtzAw – Cardioid

@Webnet: but in the example you link to (in your previous comment), you don't appear to be calling animate() at all. – Brote

Sorry, it didn't link the correct revision.... jsfiddle.net/Webnet/DtzAw/1 – Cardioid

@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. – Brote