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

Posted 2023-03-06

【中文标题】如何使用jQuery创建左右滑动效果？

【英文标题】：How can I use jQuery to create a left and right sliding effect?

【发布时间】：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，但我不确定如何实现它或者它是否正确。

【问题讨论】：

你也可以看看这个答案：***.com/questions/596608/slide-right-to-left

为什么不选择成千上万的（免费）插件之一？

谢谢，但我的代码有点不同，所以不确定如何在其中实现切换功能。

【参考方案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 我正在使用您上面的代码，但我被卡住了。我如何默认显示测试句子，而不是单击按钮，我想添加下一个和上一个按钮并使用它显示不同的幻灯片。有什么帮助吗？我在这里发布了一个问题：***.com/questions/17644018/…

【参考方案2】：

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

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

【参考方案3】：

jQuery UI 有一个slide 函数

Check out the docs

【讨论】：

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