jQuery 向左滑动并显示

标签 jquery effects

我用一些类似于 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 函数从左侧开始显示图像,然后向右侧显示。 我正在寻找某种方法来做同样的事情,但从右侧开始并向左侧推进。谢谢!

编辑

jQuery Interface 有一些我需要的东西(我基本上需要他们的“向右滑入”和“向左滑出”功能),但我无法让它与 jQuery 1.3 一起工作:http://interface.eyecon.ro/demos/ifx.html .此外,他们的演示似乎已损坏,并且在抛出一百万个错误之前只会做一次幻灯片。

最佳答案

此功能包含在 jquery ui 中 http://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);
    });
  }
});

您将需要以下引用资料

<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 向左滑动并显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/521291/

相关文章:

jquery - 使用 jquery Ajaxify 链接特定类

javascript - JQuery 升序和降序排序(不是表格)

javascript - 如何使用 jQuery 将 HTML 附加到 <div> 的末尾?

javascript - jQuery:获取未检查表行的ID

c - 以编程方式为图像添加凸面效果

javascript - jQuery 切换按钮不透明度

javascript - php获取输入字段值和span值

wpf - 对窗口背景图像的模糊效果

haskell - 将具有有效功能空间(如 ML)的语言核心嵌入到 Haskell 中有多实用?

jquery - 如何将 CSS3 动画效果添加到简单的 jQuery 选项卡