jQuery 动画 效果
在本教程中，您将学习如何使用 jQuery 为 CSS 属性设置动画。
jQuery animate() 方法
jQuery animate() 方法用于创建自定义动画。 animate() 方法通常用于为数字 CSS 属性设置动画，例如 width, height, margin, padding, opacity, top, left 等，但非数字属性（例如 color or background-color）不能使用基本的 jQuery 功能进行动画处理。
注意： 并非所有 CSS 属性都是可动画的。 通常，任何接受数字、长度、百分比或颜色值的 CSS 属性都是可动画的。 但是，核心 jQuery 库不支持彩色动画。 要操纵颜色并为其设置动画，请使用 jQuery 颜色插件。
语法
jQuery animate() 方法的基本语法可以通过以下方式给出：
animate() 方法的参数含义如下：
- 必需的属性参数定义要动画的 CSS 属性。
- 可选的持续时间参数指定动画将运行多长时间。 持续时间可以使用预定义字符串
'slow'或'fast'之一指定，也可以以毫秒为单位； 较高的值表示较慢的动画。 - 可选的 callback 参数是动画完成后调用的函数。
这是 jQuery animate() 方法的一个简单示例，该方法在单击按钮时将图像从其原始位置向右移动 300 像素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>注意： 默认情况下，所有 HTML 元素都有静态位置。 由于静态元素无法移动，因此您必须将元素的 CSS position 属性设置为 relative, fixed, 或 absolute 以操纵或动画其位置。
一次为多个属性设置动画
您还可以使用 animate() 方法同时对元素的多个属性进行动画处理。 所有属性同时动画，没有任何延迟。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>注意： 与 animate() 方法一起使用时，CSS 属性 名称必须为驼峰式，例如 如果要为字体大小设置动画，则需要编写 'fontSize' 而不是 'font-size'。 同样，写 'marginLeft' 而不是 'margin-left', 'borderWidth' 而不是 'border-width'，以此类推。
提示：您必须先设置元素的 border-style 属性，然后才能为其 border-width 属性设置动画。 一个元素必须有边框才能为边框宽度设置动画，因为 border-style 属性的默认值为 none。
一个一个地动画多个属性或排队动画
您还可以使用 jQuery 的链接功能在队列中一个一个地为一个元素的多个属性设置动画。 我们将在下一章了解更多关于链式的知识。
下面的示例演示了一个 jQuery 队列或链式动画，其中每个动画将在元素上的前一个动画完成后开始。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>具有相对值的动画属性
您还可以定义动画属性的相对值。 如果使用前导 += 或 -= 前缀指定值，则通过从属性的当前值加上或减去给定数字来计算目标值。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>使用预定义值对属性进行动画处理
除了数值之外，每个属性都可以采用字符串 'show', 'hide', 和 'toggle'。 当您只想将属性从其当前值设置为初始值（反之亦然）时，这将非常有用。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>