如何使用jQuery创建左右滑动效果？

Question

我有以下jQuery代码段：

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

与.fadeIn()类似，是否有向左/向右滑动选项？

我也发现了这一点，但是我不确定如何实现它，或者它是否正确。

Answer 1

使用您发布的链接中的代码。

包括所需的库（或使用本地副本）：

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

将此Javascript添加到您的页面：

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);
    });
  }
});

我什至添加了speed参数，以便您可以指定要使其动画的速度。

从那时起，您可以使用如下代码：

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

演示： http : //jsfiddle.net/EzP2q/1/

Answer 2

在这里，检查一下！ 这就是您所需要的！

本教程解释了您需要的所有内容-> 沿不同方向滑动元素

Answer 3

jQuery UI具有slide功能

查看文档