0

したがって、JSON応答を取得するサーバー上の更新をチェックするこのアプリがあります。新しい更新はそれぞれ、JavaScriptを使用してinsertBeforeを介して追加された新しいdivのリストの一番上に配置されます。

すべて正常に動作しますが、div が追加されたときにアニメーション効果を追加したいと思います。つまり、「ゆっくりと」既存の div を下に移動し、新しい div を一番上に追加します。

アプリケーションは実際には iframe を使用せずに facebook で実行されます。jquery を使用しようとしましたが、facebook では動作しないようです。FB が行うコード変更を見て、他のフレームワークにも同様の問題があると思います。

4

3 に答える 3

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 に答える
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 に答える
1

使用している JavaScript フレームワークによって異なります。しかし、MooTools、Scriptaculous、jQuery、およびYUI Animationを見てください。自分で JavaScript を作成している場合は、時間の経過とともに要素のスタイルを変更し、アニメーション完了イベントをトリガーしてタイマーを停止し、最後にページを更新するインターバル タイマーを使用する作業がかなり複雑であることがわかります。エラーが発生しやすいプロセス。

おそらく、一般的にスライド ダウンと呼ばれるものを探しているでしょう(デモを試してみてください)。

于 2008-11-26T17:36:35.147 に答える