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: http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles — Stephen, Dec 21 '11 at 19:42
@Stephen Have they updated jQuery UI to use CSS3 transitions? — Jasper, Dec 21 '11 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, Dec 21 '11 at 20:01
Perhaps this thread could help you out: http://stackoverflow.com/questions/5589104/anyway-to-add-css3-transition-animation-to-element-on-jquery-event — Stefan, Dec 21 '11 at 20:02
@Stefan sadly that method does not work (i attempted it, and the same result was achieved (no animation)) — jaredrada, Dec 21 '11 at 20:16

Jasper · Accepted Answer · 2011-12-21T19:57:00.423

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 '11 at 19:57

answered Dec 21 '11 at 19:26

Jasper

75,717
14
151
146

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 – jaredrada Dec 21 '11 at 19:53
@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. – Jasper Dec 21 '11 at 19:54
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. – jaredrada Dec 21 '11 at 19:59
@porfuse Did you see the **update** to my answer? Setting a timeout seems to do the trick. – Jasper Dec 21 '11 at 20:06
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. – jaredrada Dec 21 '11 at 20:13

perform CSS3 animation after using jQuery .appendTo

1 Answers1

Linked