0

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

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

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

4

3 回答 3

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

于 2008-11-26T17:54:30.413 回答
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!";
}

请注意，您可能希望使您的动画代码更通用（传入 ID、回调函数等），但对于基本动画，这应该可以帮助您入门。

于 2008-11-26T21:15:13.020 回答
1

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

您可能正在寻找通常称为向下滑动 的东西（尝试演示）。

于 2008-11-26T17:36:35.147 回答