Javascript 事件处理程序继续在动画函数之前调用

为了了解事件冒泡是如何工作的，我创建了许多div控件，一个接一个，以此类推，最后将click事件附加到所有div上，使div在每次单击时都闪烁。我希望一个div会闪烁，然后另一个，就像这样，它会向家长泡沫，但所有的div都在同一时间闪烁

为什么一个事件处理程序不在调用另一个事件处理程序之前完成？动画功能正在做什么？因为它不会正常发生，所以我一直注意到只有在完成一个事件处理程序之后，才会调用另一个事件处理程序

这是我的js：

$("div").on("click", function (e) {
            $(this).animate({ backgroundColor: "red" }, 400, "swing", function () {
                $(this).animate({ backgroundColor: "white" }, 400, "swing")
            })
})

<div><div><div><div><div><div><div>

</div></div></div></div></div></div></div>

这里是Html：

$("div").on("click", function (e) {
            $(this).animate({ backgroundColor: "red" }, 400, "swing", function () {
                $(this).animate({ backgroundColor: "white" }, 400, "swing")
            })
})

<div><div><div><div><div><div><div>

</div></div></div></div></div></div></div>

来自Jquery

动画属性和值 所有已设置动画的属性都应设置为单个数值，以下说明除外；大多数非数字属性不能使用基本jQuery功能设置动画（例如，宽度、高度或左侧可以设置动画，但背景色不能设置动画，除非使用jQuery.color插件）。除非另有规定，否则特性值将被视为像素数。在适用的情况下，可以指定单位em和%

该页面中提到了一个插件，允许设置背景颜色的动画。此外，在您的代码中，您可能希望也可能不希望合并：

e.stopPropogation();

这将阻止div事件冒泡

你可以：

$("div").on("click", function (e) {
            $(this).css({backgroundColor: "red", opacity: 0})
            $(this).animate({ opacity: 1 }, 400, "swing", function () {
                $(this).css({backgroundColor: "white", opacity: 0})
                $(this).animate({ opacity: 1 }, 400, "swing")
            })
})

但效果会有所不同，div将消失并重新显示为红色，然后消失并重新显示为白色

如果您只是尝试暂停传播，然后在Annation结束时重新启动，您可以在父元素上重新触发事件

$("div.animate").on("click", function (e) {
  e.stopPropagation();
  $(this).animate({ backgroundColor: "red" }, 400, "swing", function () {
    $(this).animate({ backgroundColor: "white" }, 400, "swing", function(){
      $(e.target.parentElement).trigger(e.type);
    })
  })
})

---

要仅使某些div具有动画效果，只需向其添加一个类“animate”，例如，然后使用animate only将处理程序附加到div，任何其他div都将使用动画类div自动传播单击，停止传播、设置动画，并在完成向上传递DOM树时进行传播。

我已经为此使用了jquery UI。动画是同时发生的，而不是一次在一个div上。停止传播和触发确实解决了这个问题，但为什么在动画之间会调用其他父事件处理程序，因为我们需要执行所有这一切？？目前，所有在DOM上运行的父元素都将被触发。您可以在动画函数中进行检查，以检查事件的目标是否与细节匹配。将类添加到所有要设置动画的div中，然后仅将单击处理程序添加到这些div中。单击的div嵌套的其余元素将自动传递单击事件。编辑答案以显示。请看下面的示例，我刚刚编辑以添加您想要的功能。您将停止div上的传播，然后设置动画，在最终动画回调结束时，您将通过触发父元素上的事件来重新启动传播。如果这对你有用，请投赞成票。