Анимированная insertBefore в javascript

Question

Итак, у меня есть это приложение, которое проверяет наличие обновлений на сервере, получая ответ JSON, каждое новое обновление помещается наверху моего списка в новый div, который добавляется через insertBefore с помощью javascript.

Все работает отлично, но я хочу добавить эффект анимации при добавлении div, т.е. «медленно» перемещать существующие divs вниз и добавлять новые вверху. Любые указатели на то, как это сделать что ?

Приложение действительно работает в facebook, не используя iframe, я пытался использовать jquery, но он, похоже, не работает на facebook, и, глядя на изменения кода, которые делает FB, я предполагаю, что другие структуры будут иметь аналогичную проблему.

Answer 1

Поскольку вы хотите сделать это самостоятельно, вам нужно будет использовать 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!"; 
} 

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

Answer 2

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

Возможно, вы ищете что-то обычно называемое slidedown (попробуйте демонстрации).

Answer 3

В 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. Затем вы установите переполнение обратно на все, что было (этот шаг, вероятно, не нужен), и удалите атрибут height (на всякий случай).