jQuery向左滑动并显示 [英] jQuery slide left and show

问题描述

我扩展了名为slideRightShow()和slideLeftHide()的jQuery效果，它具有几个与slideUp()和slideDown()类似的功能，如下所示.但是，我也想实现slideLeftShow()和slideRightHide().

I extended the jQuery effects called slideRightShow() and slideLeftHide() with a couple functions that work similarly to slideUp() and slideDown() as seen below. However, I would also like to implement slideLeftShow() and slideRightHide().

我知道有很多提供此类功能的库(我想避免添加另一套javascript文件)，但是任何人都可以提供一个简单示例来说明如何实现slideLeftShow()或slideRightHide()?

I know there are substantial libraries that offer this type of thing (I'd like to avoid adding another large set of javascript files), but can anyone provide a simple example of how to implement either slideLeftShow() or slideRightHide()?

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

上面的slideRightShow功能从左侧开始显示图像，然后向右侧显示. 我正在寻找某种方法来做同样的事情，但要从右侧开始，然后向左侧进行 .谢谢！

The above slideRightShow function starts showing the image from the left side and it progresses toward the right side. I am looking for some way to do the same thing but start from the right side and progress toward the left. Thanks!

编辑

jQuery Interface具有我需要的东西(我基本上需要它们的向右滑动"和向左滑动"功能)，但是我无法使它与jQuery 1.3配合使用:

jQuery Interface has something like I need (I basically need their "slide in right" and "slide out left" functions), but I couldn't get this to work with jQuery 1.3: http://interface.eyecon.ro/demos/ifx.html . Also, their demo seems to broken as well as it will only do a slide once before throwing a million errors.

推荐答案

此功能作为jquery ui http://docs.jquery.com/UI/Effects/Slide 如果您想用自己的名字扩展它，可以使用它.

This feature is included as part of jquery ui http://docs.jquery.com/UI/Effects/Slide if you want to extend it with your own names you can use this.

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

您将需要以下参考文献

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

这篇关于jQuery向左滑动并显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！