Jqueryのアニメーション進行状況を知るには？

Question

私は、トップからスライドして別のページを表示するWebページを持っています...私はこれをjqueryアニメーションを使用して実現しました...今、私のクエリはどのようにanimate（）メソッドの進行の割合を知ることができます...ページからその完了に

おかげ

Answer 1

step-callbackを使用してアニメーションオプションを渡すと、すべてのステップで機能を実行できます。あなたはそれを見ることができます。

$('#myElement').animate({/*Your animation options.*/}, { 
    step: function(current_number){ 
    /* measure stuff using the first argument passed to this function */ 
    } 
}) 

EDIT @Rocketはa demoを作りました。

Answer 2

まあスライディング開始し、アニメーションのための時間を定義します。対応するタイムパンでsetIntervalを実行することができます。 Like this。

$(function() { 
    $("#hello").animate({"height":600}, 10000); 
    var percent = 0; 
    var pointer = setInterval(function() { 
    if (percent > 100) { 
     clearInterval(pointer); 
     return; 
    } 
    $("#Status").text(percent + "%"); 
    percent++; 
    }, 100); 
}); 

EDIT

私は年末までの間隔をクリアするためにいくつかのコードを追加しました。 And updated the demo

EDITは

私は再びDemoを更新しました。ここでは、animateのコールバックは、間隔を停止する責任があります。しかし、それは鮮やかに正確ではありません。

Answer 3

animate（）に組み込まれているstep callback functionを使用して、その進捗率を計算することができます。

Answer 4

が、私はこれはjQueryの1.8 `.animate（）のとおり

<style> 
#frame{ 
width:400px; 
height:50px; 
border:1px solid #000; 
} 
</style> 


    <div id="progress"></div> 
    <div id="frame"></div> 

    <script> 
    $(document).ready(function(){ 

    $("#frame").animate({height:'500'}, 
     { 
     step: function(now, fx) { 
     $("#progress").text(now);   
     }, 
     complete: function(){ 

     } 
     }); 
    }); 
    </script>