1

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

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

4

3 回答 3

3

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

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

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

于 2013-04-25T14:52:12.563 回答
2

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

这个 tut 解释了您需要的一切 ->在不同方向上滑动元素

于 2013-04-25T14:53:31.450 回答
1

jQuery UI 有一个slide功能

查看文档

于 2013-04-25T14:45:36.550 回答