Slide + $.extend + $.fn.extend

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参数不一样，该方法同样可以让选定容器上下移动。见：http://docs.jquery.com/UI/Effects/Slide#options

jqueryUI中show和hide方法可加入的特效见:http://jqueryui.com　

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

　　　　

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

 

<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>
<scriptsrc="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<scriptsrc="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

 

 

$.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有什么联系 怎么区分的 还不太明白