Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

perform CSS3 animation after using jQuery .appendTo

perform CSS3 animation after using jQuery .appendTo


I want to use .appendTo() to modify the DOM position of an element. Once this is complete I need to animate the element with CSS3.

The element will not animate, instead it snaps to the new CSS style.


$(".run").click(function() {



.imageOriginal {
    -webkit-transform: scale(0.1);
.imageAnimated {
    -webkit-transition: all 1s ease-in-out;    
    -webkit-transform: scale(1);

I separated the the .appendTo() and the .toggleClass() methods to fire on two different click events. This method works (but obviously isn't desired). I also tried using .delay(1000) after the append, but this doesn't work either.

Problem courtesy of: jaredrada


The issue is that you are appending the content and then toggling the class at the same time. If you remove the .appendTo() call it works fine:


Here is a demo:

I'm not really sure what is happening but if you watch the image element in FireBug you can see that the transition property that gets added has a duration of 0s even though a duration was specified.

Also .delay() only works for queues (like .animate() calls).


If you place the .toggleClass() call inside a setTimeout anonymous function then it appears to work as desired:

$(".run").click(function() {
    var $this = $(".imageOriginal");
    setTimeout(function () {
    }, 0);

Here is a demo:

Solution courtesy of: Jasper


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

perform CSS3 animation after using jQuery .appendTo


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription