在javascript中的动画insertBefore

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

所有的作品都很好，但我想添加一个动画效果，当div被添加，即“缓慢”移动现有的div，并在顶部添加新的，任何关于如何做的指针那？

应用程序实际上在Facebook上运行，不使用iframe中，我试图用jQuery的，但它似乎并没有在Facebook工作，看代码的修改是FB做，我想其他框架都会有类似的问题。

2008-11-26 webclimber

你使用任何特定的JavaScript库？动画手动完成很麻烦 – 2008-11-26 17:35:27

既然你正在寻找自己做，你需要使用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-26 21:15:13

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

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

来源

2008-11-26 17:36:35 dlamblin

在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-26 17:54:30 strager

在javascript中的动画insertBefore

回答

相关问题