Question

我有一个网页，通过从顶部滑动带来另一个页面...我已经使用jquery animate实现了这个...现在我的查询是如何知道animate（）方法的进度百分比...就像从页面开始滑动到完成

由于

Answer 1

您可以使用在动画选项中传递的step-callback来执行每一步的功能。你可以调查一下。

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

修改 @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);
});

修改

我已经添加了一些代码来清除间隔。 And updated the demo

修改

我再次更新了Demo。这里animate的回调负责停止间隔。然而，它并不精确。

Answer 3

您可以使用内置于animate（）中的step callback function并计算出该百分比的进度。

Answer 4

我希望这会起作用

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

如何知道Jquery的动画进度？

4 个答案: