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

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

Answer 2

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

e.g.

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

JS Fiddle