下载掌阅APP，畅读海量书库
立即打开
1.7 图片的动画效果
用户如果在Web 2.0风格的网站上浏览过图片的话，经常会看到图片沿水平、垂直或自定义轨迹移动的动画效果。有些动画效果需要用户激活，有些则是自动开启。网站中加入这些动画效果大大提升了页面的交互性能。例如，WOW.js网站首页加入的动画效果如图1.7所示。
本例代码如下：
图1.7 图片“移入”动画效果
“动画”效果通过第05行的animate()函数实现，该函数执行CSS属性集的自定义动画。具体来讲，就是通过CSS样式将元素从一个状态改变为另一个状态，且CSS属性值是逐渐改变的，这样就可以创建动画效果。animate()函数的写法如下：
其中params参数用来定义形成动画的CSS属性；speed参数用来规定效果的时长，可取值为slow、fast或毫秒；callback参数用来设置动作完成后所执行的函数名称。
以上代码实现的“动画”演示效果如图1.8所示。
图1.8 “动画”效果图
除了以上的基本动画功能，animate()函数还支持队列功能，这意味着如果用户需要编写多个animate()调用，jQuery框架会创建包含这些方法调用的“内部”队列，然后逐一运行这些animate()调用。具体实现代码如下：
注意： “动画”函数需要修改HTML元素的位置属性。因为默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如果需要对位置进行操作，要在页面CSS样式代码中把元素的position属性设置为relative、fixed或absolute。