Question

只是为了查看事件冒泡的工作原理，我创建了许多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")
            })
})

这里是 HTML ：

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

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

Answer 1

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

动画属性和值除非另有说明，否则所有动画属性都应设置为单个数值。大多数非数字属性不能使用基本的jQuery功能进行动画处理（例如，可以对width，height或left进行动画处理，但不能对background-color进行动画处理，除非使用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动画，只需在其上添加一个类“ animate”，然后将处理程序附加到仅具有animate的div上，其他任何div就会通过动画分类的div自动阻止点击，从而停止传播，动画处理和完成DOM树的传递之后。

事件处理程序比动画函数更早调用

1 个答案: