刘新修

 该实例利用jQuery效果animate() 方法改变CSS背景定位属性实现动画效果，CSS背景属性值是逐渐改变的，这样视觉上就达到动画效果。

在写入这样的无序列表：

定义下面的CSS样式：

下面是实现效果的核心jQuery代码：

在上一篇文章中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：

css("border","solid 5px blue");

如果知识按照常规的方式，将fadeOut(“slow”)改为css(“border”,”solid 5px blue”),并不能达到预期的效果。预期效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动哈ude时候，css()方法就被执行过了。

出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下：

这样以来，css()方法就加入到动画队列中了，从而满足了上文提出的需求。