隐藏和显示
显示方向从左上角到右下角,隐藏方向相反。
- show(speed, fn); // 显示
- hide(speed, fn); // 隐藏
- Toggle(speed, fn); // 切换(隐藏/显示)
滑动效果
默认:显示从上到下滑入,隐藏从下到上滑出。
设置绝对定位top属性,没有设置bottom:同默认。
设置绝对定位bottom属性,没有设置top: 显示从下到上滑入,隐藏从上到下滑出。
- slideDown(speed, fn); // 显示
- slideUp(speed, fn); // 隐藏
- slideToggle(speed, fn); // 切换(显示/隐藏)
淡入淡出
这个没什么好说的,直观感受就是调节透明态度。
- fadeIn(speed, fn); // 显示
- fadeOut(speed, fn); // 隐藏
- fadeToggle(speed, fn); // 切换(显示/隐藏)
- fadeTo(speed, opacity, [fn]); // 可以指定透明度,opacity:指定一个0-1之间透明度数字。
speed: 速度,单位:毫秒。也可以传递固定字符串:slow、mormal、fast。
fn: 显示成功后回调函数。可以不使用。
问题一
使用show、hide、Toggle、slideDown、slideUp、slideToggle函数来操作行标签的时候,会有卡顿,操作图片(img标签)能明显感觉到卡顿。而对于块标签,没有任何问题。
行标签:包含a、span、em、strong、img、var;
块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6;
分析
jQuery的隐藏和显示,是通过控制高度实现的,对于行标签,有默认高度(默认高度不等于行高),以图片为例,一旦图片的高度小于默认高度,就会以图片上下对齐的方式展示(vertical-align)。
解决方法
使用一个块标签,把行标签包裹起来,操作块标签就可以纵享丝滑。
问题二
对图片进行 slideDown 和 slideUp 操作,出现的效果类似于 hide 和 show 的效果
分析
因为没有对图片宽度进行设置。在单方面缩小高度时,会等比缩小宽度。
解决方法
对图片设置宽度。