Question

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

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

应用程序实际上在facebook中运行而不是使用iframe，我试图使用jquery但它似乎不适用于facebook，并且看看FB做的代码修改，我认为其他框架会有类似的问题。< / p>

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

Answer 2

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

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

Answer 3

由于您希望自己动手，因此需要使用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，回调函数等），但对于基本动画，这应该让您开始。

javascript中的动画insertBefore

3 个答案: