I have some elements that I'm applying CSS3 Transitions on by adding a new class.

HTML

<div id="parent">
   <div class="child">
   </div>
</div>

CSS

.child {
    background: blue;
    -webkit-transition: background 4s;
    -moz-transition: background 4s;
    transition: background 4s;
}

.newChild {
   background: red;
}

jQuery

$(".child").addClass("newChild");

When I clone the .child element before adding the new class, and then I add the new class, transitions are applied immediately, not after 4sec.

Check out this fiddle.

I have some elements that I'm applying CSS3 Transitions on by adding a new class.

HTML

<div id="parent">
   <div class="child">
   </div>
</div>

CSS

.child {
    background: blue;
    -webkit-transition: background 4s;
    -moz-transition: background 4s;
    transition: background 4s;
}

.newChild {
   background: red;
}

jQuery

$(".child").addClass("newChild");

When I clone the .child element before adding the new class, and then I add the new class, transitions are applied immediately, not after 4sec.

Check out this fiddle.

• javascript
• jquery
• html
• css

• just for the record: apply the classname only, without a leading dot: .addClass("classname") and not ".classname". – Alex Commented Mar 3, 2014 at 9:02
• @Alex sorry mistakes when I type fast. – Ali Bassam Commented Mar 3, 2014 at 9:03
• You are cloning the child element, but no animation is applied, is that intentional? – Mr. Alien Commented Mar 3, 2014 at 9:05
• @Mr.Alien I want to apply the transitions on the cloned elements, but they are applied instantaneously not after 4sec. – Ali Bassam Commented Mar 3, 2014 at 9:06

4 Answers 4

As I mentioned here:

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

Updated

Per your ment, you should remove the .end class from the cloned elements when you remove the children by $("#remove").click().

$("#remove").click(function(){
     $("#parent").children("div").remove();
    clone.removeClass('end');
});

The reason is you've defined the clone in global scope. Thus the cloned elements will have the .end class after adding the class by $(this).addClass("end").

UPDATED DEMO.

You need to add a little timeout, the document gets altered too fast:

var clone;

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

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

$("#generate").click(function(){
    $("#parent").append(clone);
    setTimeout(function() {
        $("#parent").children("div").addClass("newChild");
    }, 30);

});

jsfiddle

I think this .delay(), .queue() and .dequeue() should be used:

$("#generate").click(function(){
    $("#parent").append(clone);
    $("#parent").children("div").delay(1).queue(function() {
       $(this).addClass("newChild").dequeue();
    });
});

Put your transition on newChild:

.newChild {
    background: red;
   -webkit-transition: background 4s;
   -moz-transition: background 4s;
   transition: background 4s;
}

Fiddle