jQuery - 效果（一）之 动画

在 jQuery 中，我们可以使用 animate() 方法来给元素添加自定义动画。

animate(properties, speed, easing, callback)

为元素添加自定义动画。

参数	类型	描述
properties	Object	必选。一个CSS属性和值的对象，元素将根据这组对象里的描述发生相应的变化。
speed	String/Number	可选。动画时长，预设值为 "slow"、"normal"（默认值，400）、"fast"，也可自定义动画时长，单位为毫秒（如：1000）。
easing	String	可选。过渡动画的类型，预设值为 "linear"、"swing"（默认值）。
callback	Function	可选。动画完成时执行的函数。

注意：在 animate() 中改变色彩是无效的。

操作单个属性

---

代码：

    
    
    
    



改变 div 的宽度

改变 div 的宽度(使用相对值)

效果演示：

操作单个属性.gif

操作多个属性

---

代码：

    
    
    
    



改变 div 的宽度&高度&透明度

效果演示：

操作多个属性.gif

移动位置

---

默认情况下，所有元素都无法移动，如需移动元素的位置，需要把元素的 CSS position 属性设置为 absolute、relative 或 fixed。

代码：

    
    
    
    



移动 div 的位置

效果演示：

移动位置.gif

使用队列

---

使用队列，即编写多个 animate() 函数，jQuery 会创建一个队列，将这些 animate() 函数添加到队列中，然后逐一执行这些函数。

代码：

    
    
    
    


移动 div 的位置

效果演示：

使用队列.gif