21、jQuery 特效与动画实战指南

jQuery 特效与动画实战指南

1. jQuery 特效基础

1.1 fadeTo() 函数

fadeTo() 函数与其他特效函数略有不同，它可以将元素淡化为特定的不透明度。与其他特效不同的是，你必须提供一个速度值，此外，还需要提供一个 0 到 1 之间的值来表示元素的不透明度。

示例代码：

$('p').fadeTo('normal',.75);

这个函数会改变元素的不透明度，无论元素当前是可见还是不可见。如果将元素淡化为 0 不透明度，元素将不再可见，但它在页面上占用的空间仍然保留。

1.2 滑动元素特效

为了增加更多的视觉效果，你可以使用滑动特效让元素滑入或滑出视图。相关函数与淡入淡出特效类似，它们可以使页面元素出现和消失，并且可以设置速度值。
- slideDown() ：使隐藏的元素滑入视图。首先，元素的顶部出现，元素下方的内容会被向下推。如果元素已经可见，则此函数无效。如果不提供速度值，元素将以 400 毫秒的速度滑入。
- slideUp() ：通过隐藏元素的底部并将元素下方的内容向上移动，直到元素消失。如果元素已经隐藏，则此函数无效。如果不提供速度值，元素将以 400 毫秒的速度滑出。
- slideToggle() ：如果元素当前隐藏，则应用 slideDown() 函数；如果元素可见，