jquery显示隐藏操作
记得还是当初开始学习jquery的时候有去用心看看文档,然后在做项目的时候偶尔有用到,一直没有闲暇之余去温习,去整理所谓的基础,看了后有些淡忘的得以再次更新。
第一、隐藏显示
以下所有的代码如无特殊声明中speed的值可选且可填写(slow,fast,number(毫秒))。callback为执行完后要执行的函数也是可选参数。
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
$(selector).toggle(speed,callback); //基于show()和hide()进行切换
第二、淡入淡出
注意:以下语法中fade后面的第一个字母必须是大写。
$(selector).fadeIn(speed,callback);//显示
$(selector).fadeOut(speed,callback);//隐藏
$(selector).fadeToggle(speed,callback);//测试时无效。火狐监测提示TypeError: $(...).fadeToggle is not a function。按语法其他都有效这个就这样不解?
后来找到了原因,引用的js库里面没有实现这个方法。版本是1.4.1。后来在官网下了个2.1.4的就可以了。看来还得要更上时代,否则很多弊端。
$(selector).fadeTo(speed,opacity,callback);//渐变 speed和opacity是必须的参数。opacity的取值是0-1.值越大渐变越清晰
第三、上下滑动
注意:以下语法中slide后面的第一个字母必须是大写.好奇的厕所了下slideLeft()和slideRight,结果是无效(*^__^*) 嘻嘻。
$(selector).slideUp(speed,callback);//向上滑直到消失
$(selector).slideDown(speed,callback);向下滑直到整个div的大小呈现
$(selector).slideToggle(speed,callback);//基于slideUp()和slideDown()进行切换
测试截图: