jQuery动画-让页面动起来（二）

五、滑动动画

基本动画函数的效果一个综合了滑动和透明度渐变的函数，jQuery还单独提供了只有滑动效果的相关函数。

滑动动画函数 Sliding

名称	说明	举例
slideDown(speed,[callback])	通过高度变化（向下增大）来动态的显示所有匹配的元素，在显示完成后可触发一个回调函数 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”方式显示出来。在jQuery1.3 中，上下的padding和margin也会有动画，效果更流畅	用600毫秒缓慢的将段落滑下： $(“p”).slideDown(“slow”);
slideUp(speed,[callback])	通过高度变化（向上减小）来动态的隐藏所有匹配的元素，在隐藏完成后可选地触发一个函数	用600毫秒缓慢的将段落滑上： $(“p”).slideUp(“slow”);
slideToggle(speed,[callback])	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数	用600毫秒缓慢的将段落滑上或滑下： $(“p”).slideToggle(“slow”);

讲解

slideDown就是show的滑动效果版本，slideUp就是hide的滑动效果版本，slideToggle就是toggle的滑动效果版本。

参数完全相同:

1	$(“#divPop”).slideDown(“slow”);
2	$(“#divPop”).slideUp(“fast”);
3	$(“#divPop”).slideToggle(300);

六、淡入淡出动画效果

淡入淡出函数只提供透明度渐变的效果。

淡入淡出函数 Fading

名称	说明	举例
fadeIn( speed,[callback])	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选的触发一个回调函数 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化	用500毫秒缓慢的将段落淡入： $(“p”).fadeIn(500);
fadeOut( speed,[callback])	通过不透明度的变化来实现所有匹配元素的淡入出效果，并在动画完成后可选的触发一个回调函数	用500毫秒缓慢的将段落淡出： $(“p”).fadeOut(500);
fadeTo(speed,opacity,[callback])	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的触发一个回调函数	用500毫秒缓慢的将段落的透明度调整到0.66， $(“p”).fadeTo(500，0.66);

讲解

fadeIn和fadeOut两个函数对应show和hide，用于将对象以透明度渐变的效果显示和隐藏：

1	$(“#divPop”).fadeIn(200);
2	$(“#divPop”).fadeOut(“fast”);

透明度渐变没有切换函数

需要特别讲解的是fadeTo函数，这个函数能让对象渐变到指定的透明度上，opcity参数取值从0-1，比如0.6表示透明度为60%

和fadeIn与fadeOut不同的是，fadeTo函数只改变对象的透明度，即使透明度为0仍然占位，

而fadeIn和fadeOut最后一定会改变对象的display属性，fadeOut后对象将从页面上消失（不占位），但是fadeTo仅仅是让其透明度为0（仍然占位）

fadeTo函数可以配合fadeIn使用. 比如默认情况下，fadeIn最后让对象完全显示：

但是如果之前使用过fadeTo设置弹出层的透明度, 则可以让其以半透明:

核心代码如下:
//设置弹出层的透明度

1	$("#divPop").fadeTo(0, 0.66);

//让弹出层透明显示

1	if ($("#divPop").css("display") == "none")
2	{
3	$("#divPop").fadeIn(speed);
4	}
5	else
6	{
7	$("#divPop").fadeOut(speed);
8	}

用fadeTo设置了弹出层透明度后, 在使用fadeIn会让对象显示并且渐变到fadeTo设置的透明度.

这里介绍的仅仅是两个函数的特性, 实际应用中并不一定要两者配合使用.