jQuery的向左滑动并显示

Question

我延长了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的接口有类似的东西，我需要（我基本上都需要自己的“滑右”和“滑出左”的功能），但我不能得到这个用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="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> 

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

随着投入速度/回调参数，它是一个完整的下降 - 取代slideUp()和slideDown()。

Answer 3

通过将这些行添加到您自己的脚本文件中，您可以将新功能添加到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); 
    }); 
} 

Answer 4

如果你想改变速度和包括回调只需添加它们是这样的：

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