Question

看来，如果为元素设置动画，则以下两个框的行为会有所不同，具体取决于它们已经在dom中，或者很快被jQuery.append（）添加：

jQuery(document).ready(function() {
    var el1 = jQuery("<div id='movedElement1'>moved element 1</div>");
    jQuery(document.body).append(el1);
    el1.css({
        top: 200
    });

    var el2 = jQuery("#movedElement2");
    el2.css({
        top: 200
    });
});

可以在https://jsfiddle.net/omz0w9pp/1/找到完整的示例。 Box2移动到新位置（按预期），而box1就出现在那里。

知道为什么会发生这种情况，如何防止它，或者，如果不可能的话，在元素准备移动/动画时获得回调？

Answer 1

在设置css之前尝试调用$(el1).offset()。 https://jsfiddle.net/omz0w9pp/2/

jQuery(document).ready(function() {
    var el1 = jQuery("<div id='movedElement1'>moved element 1</div>");
    jQuery(document.body).append(el1);
    $(el1).offset();
    el1.css({
        top: 200
    });

    var el2 = jQuery("#movedElement2");
    el2.css({
        top: 200
    });
});

发生的事情是JavaScript比页面刷新/重绘更快，因此css转换没有机会发射。

调用.offset()强制页面重新绘制，因此当你调整css时，转换会知道值的变化并相应地触发。

你也可以使用超时（或强制重绘的任何东西），但我喜欢这种方法。

jQuery.append（）在使用转换

1 个答案: