jQuery.append（）与转换一起使用时出现异步

Question

it appears that, if an animation is set for the elements, the following two boxes behave differently depending on wether they have been in the dom already or have shortly been added by 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
    });
});

A full example can be found at https://jsfiddle.net/omz0w9pp/1/ . Box2 moves to the new position (as intended) while box1 just appears there.

Any idea why this is happening, how to prevent it or, if that's not possible, get a callback when the element is ready to be moved/animated?

Answer 1

try calling $(el1).offset() right before setting its css. 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
    });
});

What is happening is that the JavaScript fires quicker than the page can refresh/repaint, so the css transition doesn't get a chance to fire.

Calling .offset() forces a page repaint, and so when you tweak the css the transition is aware of the value change and fires accordingly.

You could also use a timeout (or anything that forces a redraw) but I like this method.