jQuery 效果 - 动画
jQuery允许我们创建自定义动画。
jQuery动画-animate()方法
jQuery animate()方法对一组CSS属性执行自定义动画。
这是animate()方法的语法：
$(selector).animate({styles}, duration, easing, callback)参数：
{styles} -指定动画将向其移动的CSS属性和值的对象
duration -确定动画效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒
easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”
callback-指定在animate()方法完成后要调用的函数
以下示例通过更改元素的宽度为元素设置动画：
$("button").click(function(){
$("div").animate({width: "500px"});
});测试看看‹/›以下示例通过更改元素的位置来对元素进行动画处理：
$("button").click(function(){
$("div").animate({left: "500px"});
});测试看看‹/›默认情况下，所有HTML元素都具有静态位置，并且静态元素无法移动。
要操纵位置，请记住首先将元素的CSS 位置属性设置为相对，固定或绝对。
jQuery animate()-设置多个属性
我们还可以同时为一个元素的多个属性设置动画。
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px",
opacity: 0.3,
left: "50px"
});
});测试看看‹/›以下示例使用animate()演示了duration和easing参数：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 4000, "linear");
});测试看看‹/›以下示例使用animate()演示了回调参数：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 500, "linear",
function(){
$(this).after("<h2>动画已经完成</h2>");
});
});测试看看‹/›使用animate()方法时要记住的要点：
所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。
字符串值不能设置为动画（例如，背景颜色）
要设置背景颜色的动画，请使用jQuery颜色插件
与animate()方法一起使用时，属性名称必须为camelCased，如：您应该使用paddingTop而不是padding-top，使用marginLeft而不是margin-left，等等。
jQuery animate()-使用队列动画
默认情况下，jQuery带有动画的队列功能。
在队列中，一个或多个功能等待运行。
这意味着，如果您彼此之后编写多个animate()调用，则jQuery将使用这些方法调用创建一个“内部”队列。然后，它一个一个地运行动画调用。
下面的示例首先更改DIV元素的宽度，然后更改高度，然后增加文本的字体大小：
$("button").click(function(){
let div = $("div");
div.animate({width:"500px"});
div.animate({height:"200px"});
div.animate({fontSize: "10em"});
});测试看看‹/›我们还可以使用jQuery的链接功能在一个队列中逐个动画一个元素的多个属性。
$("button").click(function(){
$("div")
.animate({width:"500px"})
.animate({height:"200px"})
.animate({fontSize: "10em"})
.animate({opacity: 0.3});
});测试看看‹/›您将在本教程的后面部分了解有关链接的更多信息。
jQuery animate()-使用相对值
动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。
$("p").click(function(){
$(this).animate({
fontSize: "+=5px",
padding : "+=10px"
});
});测试看看‹/›jQuery animate()-使用预定义值
此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：
$("button").click(function(){
$("div").animate({height: "toggle"});
});测试看看‹/›jQuery效果参考
有关完整的效果参考，请访问我们的jQuery 效果参考手册。