Showing animation while adding a new DOM sub element

Question

I have a list of divs in parent div. I'm now adding add another div in this list at the beginning. I'm doing this:

$('.list').prepend($('<div class="cell one "></div>'));

My question is how do I animate this adding new div so that rest of the divs just slide down.

Here is the JSFiddle for this: http://jsfiddle.net/2qbyB/

<div class="list">
   <div class="cell two "></div>
   <div class="cell three "></div>
   <div class="cell four "></div>
</div>

Answer 1

You cannot add animation to the List for the desired effect, instead you need on the new element.

Here is a simple example of sliding down (height animation) using JQuery .animate() function

$('.list').prepend($('<div class="cell one "></div>').animate({height: "50px" }, 
1500 ));

For more detail on .animate() see http://api.jquery.com/animate/ .

Answer 2

In case you do not want to use jQuery but native CSS animations, the animation won't be triggered when the class of the new element doesn't change. What you can do is to insert the element and then add the class after a timeout:

setTimeout(function() {
    $('.new').addClass('animate');
});

"new" and "animate" are of course custom classes for which you have to provide proper CSS.

You primarily want to use CSS animations for performance reasons. See here: what's faster? CSS3 transitions or jQuery animations?