javascript - 在完全应用更改之前，jQuery 的 css 方法是否会阻塞？

Question

css在使用 jQuery 的函数应用 CSS 更改后，我有一些想要执行的计算。此方法是否会等到 CSS 更改完全应用并重新绘制元素完成？

Answer 1

使用 JavaScript 修改样式是一种同步行为。更新元素的类、ID 和内联样式将立即对元素生效，您可以安全地获取该元素的新尺寸或样式。

---

话虽如此，在各种浏览器中存在一些利基错误，除非进行非常特定的样式更改，否则不会发生重新绘制。同样，布局的重新计算是同步发生的，但您可能需要做额外的工作来强制重新绘制发生。

Answer 2

您将在不同的浏览器中看到不同的行为，因为 jQuery 使用内联样式更新标记，并且浏览器决定何时重绘。例如，IE 似乎会错过很多后续的样式更改间隔——它似乎需要等待一点时间才能稳定下来，但我怀疑这只是渲染引擎的本质。Firefox 和 Chrome 的更新速度会更快一些。

问题：您在让动画顺利执行时遇到问题吗？看一下步骤：动画中的事件。

我使用类似于@bfavaretto 建议的 setInterval 和 clearInterval 来管理 IE 动画上的单个帧补间，因为它对绘制连续更新犹豫不决 - 特别是使用 jQuery UI 进度条之类的东西。

Answer 3

您的问题的真正答案是否定的，它不会等待，即使它应该等待，因为操作似乎是同步的 - 代码明智。

如果您想在设置 css 规则后立即执行某些操作，则需要使用animate持续时间为 的 jQuery 函数0：

    $('#my-selector').animate({
        'my-css-property-name': 'my-css-property-value'
    }, {
        duration: 0,
        done: function(animation, jumpedToEnd) {
            // Your callback here
        }
    })

要了解有关done函数参数的更多信息，请查看文档。