Cloning an element before transition CSS returns an element with transitions applied

Question

What I'm trying to do is clone some elements before applying CSS3 Transitions (before adding the class).

In $(window).load()I clone the elements, and then add a new class that should kick the transitions.

After deleting the previous elements with .remove(), I .append()clone hopes that it will contain the original elements without transition effects, but this is not what happens.

HTML

<div id="parent">
    <div class="start">
    </div>
</div>
<input type="button" value="1- Remove Elements" id="remove"/>
<input type="button" value="2- Generate" id="generate" />

CSS

.start {
    background: blue;
    -webkit-transition: background 4s;
    -moz-transition: background 4s;
    transition: background 4s;
}
.end {
    background: red;
}

JQuery

var clone = "";

$(window).load(function(){
    clone = $("#parent").children("div");
    $("#parent").children("div").addClass("end");
});

$("#remove").click(function(){
     $("#parent").children("div").remove();
});

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

I made a complete example here:

http://jsfiddle.net/Gv93G/

UPDATE

I skipped checking the result after adding the class again, it does not work as expected, check this script http://jsfiddle.net/QeVF6/

After retrieving the clone back, I add the class, and the transitions are applied instantly.

, , 4sec .

Answer 1

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

, .clone() :

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

.

Update

, .

, .queue() .dequeue() :

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

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