Animated insertBefore in javascript

Question

So I have this app that checks for updates on the server getting a JSON response, each new update is put at the top of my list on a new div that is added via insertBefore using javascript.

All works just fine, but i'd like to add an animation effect when the div is added, i.e. "slowly" move the existing divs down, and add the new one at the top, Any pointers on how to do that ?

The application actually runs in facebook not using the iframe, I tried to use jquery but it does not seem to work on facebook, and looking at the code modifications that FB do, I assume other frameworks will have a similar problem.

Answer 1

vague answer to a vague question :) - consult mootools and bind the animation at the point of insertion in your existing code

Answer 2

It depends on the JavaScript framework you're using; but look at MooTools, Scriptaculous, jQuery and YUI Animation. If you're just hammering out JavaScript on your own, you'll find that working with interval timers that modify the style of some element over time and then trigger an animation complete event to stop the timer and finally update the page is a fairly involved error prone process.

You're probably looking for something generally called slide down (try the demos).

Answer 3

In jQuery, you can do the following:

$(myListItem).hide().slideDown(2000);

Otherwise, roll out a custom animation, using setTimeout and some CSS modifications. Here's a messy one I whipped up in a few minutes:

function anim8Step(height)
{
    var item = document.getElementById('anim8');

    item.style.height = height + 'px';
}

function anim8()
{
    var item = document.getElementById('anim8');
    var steps = 20;
    var duration = 2000;
    var targetHeight = item.clientHeight;
    var origOverflow = item.style.overflow;

    item.style.overflow = 'hidden';

    anim8Step(0);

    for(var i = 1; i < steps; ++i)
        setTimeout('anim8Step(' + (targetHeight * i / steps) + ');', i / steps * duration);

    setTimeout('var item = document.getElementById(\'anim8\'); item.style.height = \'auto\'; item.style.overflow = \'' + origOverflow + '\';', duration);
}

(I'm not so good at Javascript, so I'm sorry it's a mess.)

Basically, you set the overflow of the li (#anim8) to hidden so the contents don't overlap other elements' contents. Then, you set the height to 0 and increase it over time to the clientHeight. Then, you set the overflow back to whatever it was (this step probably isn't really needed) and remove the height attribute (just in case).

Answer 4

Since you are looking to do it yourself you'll need to use setTimeout to repeatedly change the height of your div. The basic, quick and dirty code looks something like this:

var newDiv; 

function insertNewDiv() {
// This is called when you realize something was updated 
// ...   
    newDiv = document.createElement('div');
    newDiv.style.height = "0px";
    document.body.appendChild(newDiv); 
    setTimeout(slideInDiv, 0);
}

function slideInDiv(){  
    newDiv.style.height = newDiv.clientHeight + 10 + "px";  // Slowly make it bigger

    if (newDiv.clientHeight < 100){
     setTimeout(slideInDiv, 40);  // 40ms is approx 25 fps
    } else {
     addContent();
    }
}


function addContent(){  
  newDiv.innerHTML = "Done!";
}

Note that you may wish to make your animation code more general (pass in the ID, a callback function, etc) but for a basic animation this should get you started.