Cloning An Element Before CSS Transition Returns The Element With Transitions Applied

What I'm trying to do is to clone some elements before CSS3 Transitions are applied (before adding the class). On $(window).load() I clone the elements and then add the new class w

Solution 1:

Using clone = $("#parent").children("div") doesn't create a copy of the matched elements, but stores the returned list into a variable.

In order to create a copy of matched elements, you should use .clone() method as follows:

clone = $("#parent").children("div").clone();

UPDATED DEMO.

Update

I was under this assumption that you don't want to apply the transition on the cloned elements.

If you want to set a delay between elements to trigger the transition, you can use .queue() and .dequeue() methods as follows:

$("#generate").click(function() {
    $("#parent").append(clone);

    $("#parent").children("div").delay(4000).queue(function() {
        $(this).addClass("end").dequeue(); // move to the next queue item
    });
});

WORKING DEMO