我扩展了名为slideRightShow()slideLeftHide()jQuery种效果,使用了两个函数,它们的工作原理类似于slideUp()slideDown(),如下所示.然而,我也想实现slideLeftShow()slideRightHide().

我知道有很多库提供这种类型的东西(我希望避免添加另一个包含javascript个文件的大集合),但是有谁能提供一个简单的例子来说明如何实现slideLeftShow()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函数从左侧开始显示图像,并向右侧前进.I am looking for some way to do the same thing but start from the right side and progress toward the left.谢谢!

EDIT

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.

推荐答案

这个特性是jQueryUIhttp://docs.jquery.com/UI/Effects/Slide的一部分,如果你想用自己的名字扩展它,你可以使用它.

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

you will need the following references

<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相关问答推荐

这是否会导致内存泄漏?

如何用 jQuery / AJAX 替换表格的行

如何像这样通过 $.ajax ( serialize() + extra data ) 添加数据

如何获取将在不提交的情况下提交的所有表单值

.trigger() 与 .click() 中的 jQuery 优势/差异

如何使用 jQuery 获取 div 的当前类?

根据弹出框相对于窗口边缘的 X 位置更改 Bootstrap 弹出框的位置?

jQuery .load() 调用不会在加载的 HTML 文件中执行 JavaScript

使用 时如何从 select2 中获取选定文本

在完成前一个请求之前中止新的 AJAX 请求

如何使用 Javascript/jQuery 确定图像是否已加载?

使用 MVC、C# 和 jQuery 导出为 CSV

如何检测是否安装了 Flash,如果没有,显示一个隐藏的 div 通知用户?

如何从 jQuery UI datepicker 获取日期

jQuery 按值 Select 选项元素

jQuery:如何创建一个简单的叠加层?

使用 jQuery Select 空文本输入

如何插入元素作为第一个子元素?

如何使用 ID 变量在 jQuery 中 Select 元素?

catch forEach 最后一次迭代