perform CSS3 animation after using jQuery .appendTo

Question

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:

<div class="insert"> </div>
<img src="img/img1.png" class="imageOriginal"/>

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.

JQuery UI provides the .switchClass() function as described here: stackoverflow.com/questions/1248542/… — Stephen
– Stephen, Commented Dec 21, 2011 at 19:42
@Stephen Have they updated jQuery UI to use CSS3 transitions? — Jasper
– Jasper, Commented Dec 21, 2011 at 19:45
@Stephen Please don't recommend an entire (bloated, rubbish) library just for a single function that implements easily hand-codable behaviour. — Bojangles
– Bojangles, Commented Dec 21, 2011 at 20:01
Perhaps this thread could help you out: stackoverflow.com/questions/5589104/… — Stefan
– Stefan, Commented Dec 21, 2011 at 20:02

Jasper · Accepted Answer · 2011-12-21 19:57:00Z

3

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/

edited Dec 21, 2011 at 19:57

answered Dec 21, 2011 at 19:26

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jaredrada Over a year ago

Thanks I was under the impression .delay() would delay whatever method occured after the call. Still not sure how to fix this- the last resort would be to use jquery .animate instead of CSS3

Jasper Over a year ago

@porfuse Just curious, why are you appending the image to another element? Also I updated my answer with a solution that should work for you.

jaredrada Over a year ago

I want to animate a group of images inside a wrapper, except the one that was clicked has a different animation- so I'll be using $(this) eventually. I'm appending the clicked image to another div so I can target it and give that particular image a differing animation.

Jasper Over a year ago

@porfuse Did you see the update to my answer? Setting a timeout seems to do the trick.

jaredrada Over a year ago

Yes, I'll have to use that (even if its a little sloppy). I attempted doing .append().css({ my animations }) but it had no effect.

Collectives™ on Stack Overflow

perform CSS3 animation after using jQuery .appendTo

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related