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

【问题标题】：How can I use jQuery to create a left and right sliding effect?如何使用jQuery创建左右滑动效果？
【发布时间】：2013-04-19 12:45:35
【问题描述】：

我有以下 jQuery 代码 sn-p：

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() 是否有向左/向右滑动选项？

我也找到了this，但我不确定如何实现它或者它是否正确。

【问题讨论】：

你也可以看看这个答案：stackoverflow.com/questions/596608/slide-right-to-left
为什么不选择成千上万的（免费）插件之一？
谢谢，但我的代码有点不同，所以不确定如何在其中实现切换功能。

标签： javascript jquery slider

【解决方案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/

【讨论】：

谢谢@ian 我尝试使用上面的解决方案，但它不起作用。我收到以下错误：ReferenceError: Query is not defined Query.fn.extend({
我通过添加 JQuery 对其进行了更改，但它仍然给我同样的错误，但这次使用的是 JQuery 而不是 Query。
@user2184056 你没有像我说的那样包含 jQuery 库（我回答的第一件事）。我最后用一个演示更新了我的答案，这对我有用。我什至更改了代码，以便您可以根据需要指定多快。
@ian 我正在使用您上面的代码，但我被卡住了。我如何默认显示测试句子，而不是单击按钮，我想添加下一个和上一个按钮并使用它显示不同的幻灯片。有什么帮助吗？我在这里发布了一个问题：stackoverflow.com/questions/17644018/…

【解决方案2】：

来，看看这个！这就是你需要的！

这篇短文解释了你需要的一切 -> Slide Elements in Different Directions

【讨论】：

【解决方案3】：

jQuery UI 有一个slide 函数

Check out the docs

【讨论】：

嗨，但是我是 JS 新手，所以不确定如何将它实现到我的代码中？