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

Problem

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.

JavaScript:

$(".run").click(function() {
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated");   
});

HTML:

CSS:

.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

Solution

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:

$(".imageOriginal").toggleClass("imageAnimated");

Here is a demo: http://jsfiddle.net/38FrD/1/

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).

UPDATE

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

$(".run").click(function() {
    var $this = $(".imageOriginal");
    $this.appendTo('.insert');
    setTimeout(function () {
        $this.toggleClass("imageAnimated");
    }, 0);
});

Here is a demo: http://jsfiddle.net/38FrD/2/

Solution courtesy of: Jasper

Discussion

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

×