如何知道jquery動畫進度？

我有一個網頁，通過從頂部滑動帶來的另一個頁面......我已經實現了這個使用jQuery動畫......現在我的查詢是我怎麼知道的動畫（）方法的進度的百分比...喜歡從頁面開始滑動到其完成如何知道jquery動畫進度？

感謝

2012-02-17 Anish

在jQuery 1.8'.animate（）的''有使用'progress'選項 – 2013-09-29 15:25:42

例progress'：http://jsbin.com/oguwap/228/edit – 2014-01-22 23:34:53

可以使用step-callback，您在動畫選項傳遞給每一步執行的功能。你可以看看。

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

編輯 @Rocket做出a demo。

來源

2012-02-17 16:08:38 Avaq

這裏是一個[demo]（http://jsbin.com/oguwap/4/edit）:-) – 2012-02-17 16:20:29

+1，這個步驟回調似乎比使用'setInterval'更準確。 – 2012-02-17 16:22:36

它比你的動畫有不同的分離超時運行更漂亮。感謝您創建演示。 :) – Avaq 2012-02-17 16:27:50

嗯，你定義動畫中的時間。你可以用相應的時間跨度執行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

編輯

我又更新了Demo。在這裏，animate的回調負責停止的時間間隔。但它不是非常準確。

來源

2012-02-17 16:06:44 Oybek

您可能要回調添加到'animate'停止的時間間隔時，它的完成。 – 2012-02-17 16:09:50

您可以使用（），它內置於動畫step callback function制定出從百分比進度。

來源

2012-02-17 16:09:11 utopastac

這是一個[demo]（http://jsbin.com/oguwap/5/edit）:-) – 2012-02-17 16:29:49

我希望這將工作

<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>

來源

2013-08-06 04:25:51

如何知道jquery動畫進度？

回答

相關問題