事件处理程序继续调用早于动画函数

Question

为了看看事件冒泡是如何工作的，我创建了许多 div 控件，一个一个到另一个等等，最后将点击事件附加到所有 div 上，这使得 div 在被点击时闪烁。我希望一个 div 会闪烁然后另一个，这样它会冒泡到父级，但所有 div 都在同时闪烁。

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

这是我的js：

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

这里是Html：

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

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

Answer 1

来自 Jquery http://api.jquery.com/animate/

动画属性和值 所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 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会消失并重新出现红色，然后消失并重新出现白色。

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

$("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 具有动画效果，只需向它们添加一个类“动画”，然后将处理程序附加到仅具有动画效果的 div 上，任何其他 div 都会自动传播点击，您的动画分类 div 会停止传播、动画和当完成向上传递 DOM 树时。