Анимированная вставка перед JavaScript

Question

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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