Jquery提供了向上向下显示匹配元素的方法slideDown([speed],[切换效果默认swing],[fn])，slideUp([speed],[切换效果默认swing],[fn])，slideToggle([speed],[切换效果默认swing],[fn])。

要实现横向显示和隐藏可以扩展jquery的ui方法：

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

 

这里扩展的是UI/Effects/Slide中的方法和jquery中show与hide参数不一样，该方法同样可以让选定容器上下移动。见：

jqueryUI中show和hide方法可加入的特效见:　

要使这四个方法生效必须引入jquery的ui包，经测试，在show方法里面可以加一个回调函数，改函数会在slideXX方法调用完之后执行，例：

　　　　

slideRightShow: function() {    return this.each(function() {        $(this).show('slide', {direction: 'right'}, 500,function(){            alert("oooooo");        });    });  }

 

 

 

$.extend和$.fn.extend的区别：

　　$.extend是给jquery类添加新方法，例如：

$.extend({    addfunction:function(a,b){          return a+b;           }})

　　直接用$.addfunction(2,3);//return 5;

　　$.fn.extend是给jquery的对象添加方法，例如：

$.fn.extend({    addfunction:function(a,b){           return a+b;    }});

　　要调用addfunction就必须用$("选择器").addfunction(x,y);

 

//jqueryUI和jquery有什么联系 怎么区分的 还不太明白