jQuery向左滑动并显示

我使用了一些与slideUp()和slideDown()类似的函数来扩展名为slideRightShow()和slideLeftHide()的jQuery效果，如下所示。 不过，我也想实现slideLeftShow()和slideRightHide() 。

我知道有大量的库提供这种types的东西（我想避免添加另一个大的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接口有我需要的东西（我基本上需要他们的“幻灯片在右”和“滑出左”的function），但我不能得到这个与jQuery 1.3的工作： http : //interface.eyecon.ro/demos /ifx.html 。 此外，他们的演示似乎也被打破，而且只会在投掷一百万个错误之前做一次幻灯片。

Answer 1

如果你想使用你自己的名字来扩展它，你可以使用这个特性作为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="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> 

Answer 2

不要忘记填充和边距

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

添加了速度/callback参数，这是对slideUp()和slideDown()的完整替代。

Answer 3

你可以通过在你自己的脚本文件中添加这些行来为你的jQuery库添加新的函数，你可以很容易地使用fadeSlideRight()和fadeSlideLeft() 。

注意：如果你喜欢750px的实例，你可以改变animation的宽度。

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

Answer 4

如果你想改变速度和包括callback简单地添加它们，像这样：

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