我们可以通过 jQuery 中的 animate() 方法来创建自定义动画。
animate()方法
animate() 方法用于创建自定义动画。
语法如下：
$(selector).animate({params}, speed, easing, callback);
-
params：必需参数，定义要设置动画的CSS属性。 -
speed：可选参数，指定效果的持续时间，可选值有slow、fast、毫秒。 -
easing：可选参数，规定在不同的动画点中设置动画速度的easing函数。内置的easing函数有swing、linear。 -
callback：可选参数，是动画完成后要执行的函数。
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如果要对位置进行操作，需要先将元素的 position 属性设置为 relative、fixed 、absolute。
示例：
我们来看一下例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({left:'300px'});
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>开始动画</button></p>
</body>
</html>
在这个例子中，有一个大的矩形框，我们要实现的效果为点击按钮，让粉色正方形向右移动。需要注意的是，我们必须给要移动的元素设置 position 属性，否则 animate() 方法不起作用。而花括号 {} 中的就是 CSS 属性，animate() 方法中几乎可以操作所有 CSS 属性。但是在使用时必须注意，要使用 Camel 标记法书写所有的属性名，例如 padding-left 使用 paddingLeft ，padding-right 使用 paddingRight 等。
我们来看一下上述代码在浏览器中的演示效果：
操作多个属性
我们可以为一个动画设置多个属性，各个属性之间通过逗号隔开。例如设置动画移动后的距离，透明度，宽度和高度。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '20px',
width: '20px'
}, 2000);
});
});
在浏览器中的演示效果：
使用相对值
我们在给动画设置 CSS 属性的时候可以使用相对值，相对值就是相当于元素当前值，在值的前面加上 += 或 -= 符号。
示例：
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '-=50px',
width: '+=100px'
}, 2000);
});
});
在浏览器中的演示效果：
使用预先定义的值
我们可以将属性的动画值指定为 show，hide 或 toggle 。
示例：
show 表示显示，hide 表示隐藏，toggle 表示切换显示与隐藏：
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
height: 'toggle',
width: 'toggle',
}, 2000);
});
});
在浏览器中的演示效果：
使用队列功能
默认情况下，jQuery 提供针对动画的队列功能。这也就意味着如果在彼此之后编写多个 animate() 方法调用，jQuery 将使用这些方法调用创建一个“内部”队列，然后它逐一运行 animate 调用。
示例：
$(function(){
$("button").click(function(){
var rect = $(".rect");
rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);
rect.animate({height:'10px', opacity:'0.5'}, "slow");
rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);
});
});
在浏览器中的演示效果：
stop()方法
stop() 方法用于在动画或效果完成前对它们进行停止。它适用于所有的 jQuery 效果函数，包括滑动，淡入淡出和自定义动画。
语法如下：
$(selector).stop(stopAll,goToEnd);
-
stopAll：可选参数，指定是否应该清除动画队列，默认值为false，即只会停止活动的动画，后续队列动画仍继续执行。 -
gotoend：可选参数，指定是否立即完成当前动画，默认值为false。
示例：
点击按钮开始动画，点击粉色正方形停止动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
width: '300px',
}, 3000);
});
$(".rect").click(function(){
$(this).stop();
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>点击按钮开始动画</button></p>
</body>
</html>
在浏览器中的演示效果：
