jQuery 向左滑动并显示

jQuery slide left and show

提问by Wickethewok

I extended the jQueryeffects 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().

我扩展了jQuery被调用的效果，slideRightShow()并slideLeftHide()使用了一些slideUp()与slideDown()下面类似的功能。但是，我也想实现slideLeftShow()和slideRightHide()。

I know there are substantial libraries that offer this type of thing (I'd like to avoid adding another large set of javascriptfiles), but can anyone provide a simple example of how to implement either slideLeftShow()or 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() {
      ???
    });
  }
});

The above slideRightShowfunction 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!

上面的slideRightShow函数从左侧开始显示图像，然后向右侧显示。 我正在寻找某种方法来做同样的事情，但从右侧开始并向左侧前进。谢谢！

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.

jQuery Interface 有我需要的东西（我基本上需要他们的“向右滑动”和“向左滑动”功能），但我无法让它与 jQuery 1.3 一起使用：http: //interface.eyecon.ro/demos /ifx.html。此外，他们的演示似乎坏了，因为它只会在抛出一百万个错误之前做一次幻灯片。

回答by bendewey

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

此功能作为 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);
    });
  }
});

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>

回答by vdboor

Don't forget the padding and margins...

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

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

With the speed/callback arguments added, it's a complete drop-in replacement for slideUp()and slideDown().

随着投入速度/回调参数，它是一个完整的简易替换为slideUp()和slideDown()。

回答by thebhatta

You can add new function to your jQuery library by adding these line on your own script file and you can easily use fadeSlideRight()and fadeSlideLeft().

您可以通过在您自己的脚本文件中添加这些行来将新函数添加到您的 jQuery 库中，并且您可以轻松地使用fadeSlideRight()和fadeSlideLeft().

Note: you can change width of animation as you like instance of 750px.

注意：您可以根据需要更改动画的宽度，例如 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);
    });
}

回答by Steve Grove

And if you want to vary the speed and include callbacks simply add them like this :

如果你想改变速度并包含回调，只需像这样添加它们：

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