📅 最后修改于: 2023-12-03 15:23:54.782000 🧑 作者: Mango
在网页中，我们经常需要使用动画效果来吸引用户的注意力，而 jQuery 提供了非常方便的动画 API，可以让我们轻松地实现复杂的交互效果。
本文将介绍如何使用 jQuery 为 div 的 left 属性设置相对值的动画，以及如何调整动画的速度和持续时间。
为 div 的 left 属性设置相对值的动画，其实就是通过 jQuery 的动画函数来实现。我们可以使用 animate 函数来实现动画效果，该函数可以接受一个对象作为参数，其中包含了要修改的 CSS 属性和它们的目标值。例如：
$("div").animate({
left: "200px"
});
上面的代码会将所有的 div 元素的 left 属性在 2 秒钟内从当前值动画到 200px。但是，如果我们要将 left 属性设置为相对值，该怎么办呢？
其实很简单，我们只需要在目标值前加上 += 或 -= 即可，例如：
$("div").animate({
left: "+=200px"
});
上面的代码会将所有的 div 元素的 left 属性在 2 秒钟内从当前值动画到比当前值多 200px 的位置。如果要让 left 属性减少 200px，只需要将 += 改为 -= 即可。
下面的代码演示了如何使用 jQuery 为 div 的 left 属性设置相对值的动画，并且设置了动画的速度和持续时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 动画示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").animate({
left: "+=200px"
}, 2000, "swing");
});
});
</script>
</head>
<body>
<div></div>
<br>
<button>开始动画</button>
</body>
</html>
上面的代码中，我们在页面中添加了一个按钮和一个红色的 div 元素，并为按钮添加了一个点击事件处理函数。在点击按钮时，我们使用 animate 函数实现了 div 元素的 left 属性在 2 秒钟内从当前位置动画到比当前值多 200px 的位置，并且设置了缓动函数为 "swing"。
到此为止，我们已经学会了如何使用 jQuery 为 div 的 left 属性设置相对值的动画，并且了解了如何调整动画的速度和持续时间。如果你想了解更多关于 jQuery 动画的用法，可以参考 jQuery 官方文档中的 动画（Animation） 部分。