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

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

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

DEMO： http://jsfiddle.net/EzP2q/1/

Answer 2

在这里，看看吧！这就是你需要的！

这个tut解释了你需要的一切 - ＆gt; Slide Elements in Different Directions

Answer 3

jQuery UI具有slide功能

Check out the docs

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

3 个答案: