20、jQuery动画与效果全解析

jQuery动画与效果全解析

1. jQuery动画基础

jQuery 提供了丰富的动画功能，除了内置效果外，还能使用 animate() 函数对任何接受数值的 CSS 属性进行动画操作，如文本大小、元素位置、对象透明度或边框宽度等。不过，jQuery 本身无法对颜色进行动画处理，如文本颜色、背景颜色或边框颜色，但 jQuery UI 库可以实现这一点。

1.1 animate() 函数的使用

要使用 animate() 函数，需传入一个包含要更改的 CSS 属性列表和目标值的对象。例如，要将一个元素从页面左边缘移动 650 像素，将其透明度改为 50%，并将字体大小增大到 24 像素，可以这样创建对象：

{
  left: '650px',
  opacity: .5,
  fontSize: '24px'
}

注意，只有当值包含 px 、 em 或 % 等单位时才需要加引号。在 JavaScript 中，使用 CSS 属性作为对象字面量的键时，要去掉连字符并将连字符后的第一个字母大写，如 font-size 应写成 fontSize 。若想使用真实的 CSS 属性名，可将属性名用引号括起来：

{
  'font-size'