实例1，需要引用jquery-ui.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="https://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script><script type="text/javascript"> ???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); ?????????}); ???????} ?????}); ???????$(function(){ ???????$("body").on("click","a#show",function(){ ???????????????$("#test").slideRightShow(); ???????}); ???????$("body").on("click","a#hide",function(){ ???????????????$("#test").slideRightHide(); ???????}); ???});</script></head><body><div id="test" style="position:absolute;">asdfasdf</div><br /><a href="javascript:void(0)" id="show">显示</a><a href="javascript:void(0)" id="hide">隐藏</a></body></html>实例二：
<html> ?<head> ?<script type="text/javascript" src="jquery-1.8.2.js"></script><script type="text/javascript"> ?????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 ); ?????}; ?</script> ?<script type="text/javascript"> ?????$(function() { ?????????$(".title_bar").slideLeftHide(4000); ?????????$(".title_bar").slideLeftShow(4000); ?????}); ?</script> ?????</head> ?<body> ???????<div class="title_bar"> ?????asdfasfasdfas ???????</div> ?</body> ?</html> ?两个完整的jquery slide多方面滑动效果实例
原文地址：http://www.cnblogs.com/superfeeling/p/7472726.html