javascript 中的动画 insertBefore答案

【问题标题】：Animated insertBefore in javascriptjavascript 中的动画 insertBefore
【发布时间】：2010-09-24 04:51:19
【问题描述】：

所以我有这个应用程序来检查服务器上的更新并获得 JSON 响应，每个新更新都放在我列表顶部的新 div 上，该新 div 通过 insertBefore 使用 javascript 添加。

一切正常，但我想在添加 div 时添加动画效果，即“缓慢”向下移动现有 div，并在顶部添加新的，任何关于如何做的指针?

该应用程序实际上在 facebook 中运行而不使用 iframe，我尝试使用 jquery 但它似乎在 facebook 上不起作用，并且查看 FB 所做的代码修改，我认为其他框架也会有类似的问题。

【问题讨论】：

您是否在使用任何特定的 javascript 库？手动做动画很累

标签： javascript user-interface animation

【解决方案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、回调函数等），但对于基本动画，这应该可以帮助您入门。

【讨论】：

【解决方案2】：

在 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。然后，将溢出设置回原来的状态（这一步可能并不真正需要）并删除高度属性（以防万一）。

【讨论】：

【解决方案3】：

这取决于您使用的 JavaScript 框架；但看看MooTools、Scriptaculous、jQuery 和YUI Animation。如果您只是自己敲定 JavaScript，您会发现使用间隔计时器会随着时间的推移修改某些元素的样式，然后触发动画完成事件以停止计时器并最终更新页面是相当复杂的容易出错的过程。

您可能正在寻找通常称为 slide down 的东西（尝试演示）。

【讨论】：