jQuery $.animate() 多个元素但只触发一次回调

CSS

使用jQuery的$.animate()方法可以实现多个元素同时进行动画效果，并且只触发一次回调函数。这为网页设计师和开发者提供了更多的灵活性和创造力。本文将介绍如何使用这个方法，并提供一个简单的案例代码来演示它的用法。

在开始之前，我们先来了解一下$.animate()方法的基本用法。该方法可以通过改变元素的CSS属性来实现动画效果。通过指定属性的起始值和结束值，以及动画的持续时间和缓动效果，我们可以创建出各种各样的动画效果。

要同时对多个元素进行动画，我们可以将这些元素放入一个jQuery对象中，并在$.animate()方法中使用该对象作为选择器。在回调函数中，我们可以使用this关键字来引用正在进行动画的元素。

下面是一个简单的示例，展示了如何使用$.animate()方法同时对多个元素进行动画，并只触发一次回调函数：

html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/Ajax/libs/jquery/3.6.0/jquery.min.JS"></script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
$(document).ready(function(){
  $(".box").animate({left: '+=200'}, 1000, function(){
    $("body").append("
<strong>动画完成！</strong>
");
  });
});
</script>
</body>
</html>

在上面的代码中，我们创建了三个具有相同样式的div元素，并将它们放入一个类名为"box"的容器中。然后，我们使用$.animate()方法对这些元素进行动画，将它们的left属性的值增加200px，动画持续时间为1秒。在回调函数中，我们向页面添加了一个包含"动画完成！"文本的段落，并使用标签使其加粗显示。

通过运行上述代码，我们可以看到三个元素同时向右移动了200px，并在动画完成后添加了一个带有加粗文本的段落。这证明了$.animate()方法可以同时对多个元素进行动画，并只触发一次回调函数。

：

使用jQuery的$.animate()方法可以实现多个元素的同时动画效果，并且只触发一次回调函数。通过将这些元素放入一个jQuery对象中，并在$.animate()方法中使用该对象作为选择器，我们可以轻松地对它们进行动画操作。回调函数可以在动画完成后执行任何我们想要的操作，例如添加文本、改变样式等。这为网页设计师和开发者提供了更大的创作空间和自由度。