Animated insertBefore in javascript

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.

Answers


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.


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


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


Need Your Help

Checking time interval in java

java android calendar

I want some Java code that will tell me when school is open based on the current time.

in new google sheets, how can I import data from other spreadsheet?

google-spreadsheet google-docs google-form

I have the same problem with this topic How do I link a cell in Google Spreadsheets to a cell in another document? and they suggest to use IMPORTRANGE() with key inside but I didn't see any key in my

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.