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.

You can also look at this answer: http://stackoverflow.com/questions/596608/slide-right-to-left — Ruben-J, Apr 25 '13 at 14:46
Why not go for one of the thousands (free) plugins available? — emerson.marini, Apr 25 '13 at 14:46
Thanks but my code is a bit different so not sure how i can implement the toggle stuff into it. — starbucks, Apr 25 '13 at 14:47

Ian · Accepted Answer · 2013-04-25T15:21:16.340

3

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/

edited Apr 25 '13 at 15:21

answered Apr 25 '13 at 14:52

Ian

50,146
13
101
111

Thanks @ian i tried using the solution above but it won't work. I get the following error: ReferenceError: Query is not defined Query.fn.extend({ – starbucks Apr 25 '13 at 15:10
I changed it by adding JQuery and it still gives me the same error but this time with JQuery rather than Query. – starbucks Apr 25 '13 at 15:14
@user2184056 You didn't include the jQuery libraries like I said (the first thing in my answer). I updated my answer with a DEMO at the end, which works for me. I even changed the code so that you can specify how fast, if you wanted. – Ian Apr 25 '13 at 15:22
@ian i am using your code above and I am stuck. How can i show test sentence by default and instead of the click button i want to add a next and previous button and use it display different slides. Any help? I posted a question here: http://stackoverflow.com/questions/17644018/how-do-i-make-this-jquery-slider-render-slides-properly – KPO Jul 14 '13 at 22:11

score 2 · Answer 2 · answered Apr 25 '13 at 14:53

2

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

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

answered Apr 25 '13 at 14:53

Chamara Keragala

5,627
10
40
58

score 1 · Answer 3 · answered Apr 25 '13 at 14:45

1

jQuery UI has a slide function

Check out the docs

answered Apr 25 '13 at 14:45

Matt Busche

14,216
5
36
61

Hi, but I am new to JS so unsure how I would implement it into my code? – starbucks Apr 25 '13 at 14:47

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

3 Answers3