Анимированная вставкаBefore в javascript

Это зависит от используемой вами инфраструктуры JavaScript; но посмотрите на MooTools, Священный, jQuery и YUI Анимация. Если вы просто создаете JavaScript самостоятельно, вы обнаружите, что работа с интервальными таймерами, которые изменяют стиль некоторого элемента с течением времени, а затем запускают событие завершения анимации, чтобы остановить таймер и, наконец, обновить страницу, является довольно сложной задачей. подверженный ошибкам процесс.

Вы, вероятно, ищете что-то обычно называемое горкавниз (попробуйте демо).

В jQuery вы можете делать следующее:

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

В противном случае разверните пользовательскую анимацию, используя setTimeout и некоторые модификации CSS. Вот неприятный вопрос, который я придумал за несколько минут:

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);
}

(Я не так хорошо разбираюсь в Javascript, поэтому извиняюсь, что это беспорядок.)

По сути, вы устанавливаете переполнение li (# anim8) как скрытое, чтобы содержимое не перекрывало содержимое других элементов. Затем вы устанавливаете высоту на 0 и со временем увеличиваете ее до clientHeight. Затем вы устанавливаете переполнение обратно, как оно было (этот шаг, вероятно, действительно не нужен) и удаляете атрибут высоты (на всякий случай).

Поскольку вы хотите сделать это самостоятельно, вам нужно будет использовать setTimeout для многократного изменения высоты вашего div. Базовый, быстрый и грязный код выглядит примерно так:

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!";
}

Обратите внимание, что вы можете сделать свой код анимации более общим (передать идентификатор, функцию обратного вызова и т. д.), Но для базовой анимации это должно помочь вам начать работу.