How can I use jQuery to create a left and right sliding effect?

Question

I have the following jQuery code snippet:

var target1 = $('.div1');
var target2 = $('.div2');
target1.delay(1500).fadeIn();
target2.delay(3000).fadeIn();
// I want to use slide left here instead of .fadeIn()

Similar to .fadeIn() is there a slide left/right option?

I also found this but I'm not sure how to implement it or if it's the right one.

Answer 1

Use the code from the link you posted.

Include the needed libraries (or use local copies):

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

Add this Javascript to your page:

jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

I even added the speed parameter so that you can specify how fast you want it to animate.

And from then on, you can use something like this:

$("#element_id").slideRightShow();

DEMO: http://jsfiddle.net/EzP2q/1/

Answer 2

Here, check this out! This is what you need!

This tut explains everything you need -> Slide Elements in Different Directions

Answer 3

jQuery UI has a slide function

Check out the docs