javascript - How can I use jQuery to create a left and right sliding effect? - Stack Overflow

admin管理员组

文章数量:1023838

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.

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.

• javascript
• jquery
• slider

Share Improve this question Follow edited May 23, 2017 at 12:04 CommunityBot 111 silver badge asked Apr 25, 2013 at 14:44 starbucksstarbucks 3,0161010 gold badges4343 silver badges5353 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use the code from the link you posted.

Include the needed libraries (or use local copies):

<script src="http://code.jquery./jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode./svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode./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/EzP2q/1/

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

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

jQuery UI has a slide function

Check out the docs

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.

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.

• javascript
• jquery
• slider

Share Improve this question Follow edited May 23, 2017 at 12:04 CommunityBot 111 silver badge asked Apr 25, 2013 at 14:44 starbucksstarbucks 3,0161010 gold badges4343 silver badges5353 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use the code from the link you posted.

Include the needed libraries (or use local copies):

<script src="http://code.jquery./jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode./svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode./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/EzP2q/1/

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

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

jQuery UI has a slide function

Check out the docs

本文标签： javascriptHow can I use jQuery to create a left and right sliding effectStack Overflow