动画

animate（）方法允许您将动画设置为设定值或相对于当前值的值。

您需要将CSS属性定义为JSON格式的参数（“key”：“value”）。

第二个参数定义了动画的速度。

例如，以下代码将div的width属性在1秒内改变到250px：

$("div").click(function() {
  $("div").animate({width: '250px'}, 1000);
});

请注意提供CSS参数的JSON格式。 在处理CSS属性时，JSON语法也被用于以前的模块。

您可以使用上述语法对任何CSS属性进行动画处理，但有一个重要的事情要记住：当与animate（）方法一起使用时，所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法， 每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left，marginRight，而不是margin-right等等。

多个属性可以通过用逗号分隔来同时动画化。

例如：

$("div").animate({
  width: '250px',
  height: '250px'
}, 1000);

也可以定义相对值（该值相对于元素的当前值）。 通过将+ =或 - =放在值的前面完成：

$("div").animate({
  width: '+=250px',
  height: '+=250px'
}, 1000);

要在动画完成之前停止动画，jQuery提供了stop（）方法。

动画队列

默认情况下，jQuery带有动画的队列功能。

这意味着如果您写了多个animate（），则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。

例如：

var div = $("div");
div.animate({opacity: 1});
div.animate({height: '+=100px', width: '+=100px', top: '+=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '+=100px'}, 500);
div.animate({height: '+=100px', width: '+=100px', top: '-=100px'}, 500);
div.animate({height: '-=100px', width: '-=100px', left: '-=100px'}, 500);
div.animate({opacity: 0.5});

以上的animate（）方法将一个接一个地运行。

记住，要操纵元素的位置，您需要将元素的CSS位置属性设置为relative，fixed或absolute。

animate（）方法，就像hide / show / fade / slide方法一样，可以使用可选的回调函数作为其参数，该参数在当前效果完成后执行。