jQuery隐藏和显示的动画效果，以及遇到的问题

隐藏和显示

显示方向从左上角到右下角，隐藏方向相反。

• 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 的效果

分析

因为没有对图片宽度进行设置。在单方面缩小高度时，会等比缩小宽度。

解决方法

对图片设置宽度。