Animated insertBefore in javascript
So I have this application that checks for updates on the server by receiving a JSON response, every new update is placed at the top of my list in a new div which is added via insertBefore using javascript.
Everything works fine, but I would like to add an animation effect when the div is added, i.e. "slowly" moves existing divs down and adds a new one at the top. Any pointers on how to do this
The app does work on facebook, not using an iframe, I tried to use jquery but it doesn't seem to work on facebook and looking at the code modifications that FB does, I guess other frameworks will have a similar problem.
source to share
Since you want to do this yourself, you will need to use setTimeout to change the height of your div multiple times. 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 can make the animation code more general (pass an id, callback function, etc.), but for basic animation you need to get started.
source to share
In jQuery, you can do the following:
$(myListItem).hide().slideDown(2000);
Otherwise, expand your custom animation using setTimeout and some CSS modifications. Here's the dirty one I whipped up after 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 very good at Javascript, so I'm sorry this is a mess.)
Basically you are setting the li (# anim8) overflow to hidden so that the content does not overlap the content of other elements. Then you set the height to 0 and increase it over time by clientHeight. Then you set the overflow back to whatever it was (this step is probably not needed) and remove the height attribute (just in case).
source to share
It depends on the JavaScript framework you are using; but have a look at MooTools , Scriptaculous , jQuery and YUI Animation . If you just kick out JavaScript yourself, you'll find yourself working with interval timers that change the style of some element over time, then fire an animation end event to stop the timer, and finally page refresh is quite an error prone process ...
You are probably looking for something commonly called slide down (try demos).
source to share