jQuery向左滑动并显示


111

我延长了jQuery所谓的效果slideRightShow(),并slideLeftHide()与一对夫妇功能的工作类似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。此外,他们的演示似乎也坏了,并且只会抛出一次幻灯片,然后抛出一百万个错误。


我更新了我的帖子,希望对您
有所

Answers:


185

如果要使用自己的名称扩展此功能,它将作为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>

嗨!我正在寻找与您在此处实现的功能相反的功能。基本上,当我使用上面显示的内容来显示元素时,左边的部分首先出现,然后向右延伸。我试图使它从右侧开始向左侧发展。
2009年

1
如果您将元素向右浮动,它将起作用。除此以外。您可能希望取消属性left并在缩小元素时移动它。
bentewey

1
将元素更改为“向右”浮动并没有使幻灯片退回。我在上面澄清了是否有帮助。
Wickethewok,2009年

2
非常感谢!我不知道这是jQuery效果的一部分。如果可以的话,我会给+2!
Wickethewok,2009年


34

不要忘记填充和边距...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

添加了speed / callback参数后,它完全替代了slideUp()slideDown()


如何使它们向右滑动以达到相同的效果?
Jayant Varshney 2014年

@JayantVarshney:确保该块右对齐,可能与某些内部块对齐。此代码仅缩小宽度。如果您的CSS可以解决问题,您将获得一张正确的幻灯片
vdboor 2014年

谢谢...但是我想要两个效果都在同一个div上..例如从右向左打开然后从左向右关闭,反之亦然...
Jayant Varshney 2014年

那么,如何在完成回调中切换类呢?:-)
vdboor 2014年

谢谢,我使用CSS3动画实现了此功能
Jayant Varshney 2014年

9

您可以通过在自己的脚本文件中添加以下行来向jQuery库添加新功能,并且可以轻松地使用fadeSlideRight()fadeSlideLeft()

注意:您可以根据需要更改动画的宽度,例如750px。

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}

1
这正是我需要的而不包含jQuery UI的东西。刚刚添加了不透明度和宽度作为参数。... = function(opacity, speed, width, fn) {...}
Dylan Valade 2014年

1
到目前为止,这是最好的解决方案。无需添加更多库。谢谢。
hosseio 2015年

5

如果您想改变速度并包含回调,只需像这样添加它们:

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.