在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

回答

相關問題