Question

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

Answer 1

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

话虽如此，在各种浏览器中都有一些niche bugs，除非进行非常具体的样式更改，否则不会重新绘制。同样，重新计算布局同步发生，但您可能需要做额外的工作来强制重绘。

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函数参数的更多信息，请检查documentation.

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

3 个答案: