Jquery提供了向上向下显示匹配元素的方法slideDown([speed],[切换效果默认swing],[fn]),slideUp([speed],[切换效果默认swing],[fn]),slideToggle([speed],[切换效果默认swing],[fn])。
要实现横向显示和隐藏可以扩展jquery的ui方法:
View Code
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方法调用完之后执行,例:
View Code
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类添加新方法,例如:
View Code
$.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有什么联系 怎么区分的 还不太明白