Question

我有向下移动的元素，可以通过按P键暂停和恢复。我尝试了每个jQuery暂停插件，但是一旦我暂停动画，它就不会恢复。我做错了什么？

产卵代码：

$(document.createElement('img')).attr('src', source).
    attr('class', 'snowflake').
    css('left', x + 'px').
    prependTo('body').animate({ bottom: '0' }, 5000, 'linear');

暂停功能（按下P键时调用）：

Snow.togglePause = function (label) {
    'use strict';
    if (Snow.paused) {
        $('.snowflake').fadeIn(250);
        $('.snowflake').each(function() {
            $(this).resume();
        });

        Snow.paused = false;
    } else {
        $('.snowflake').fadeOut(250);
        $('.snowflake').each(function() {
            $(this).pause();
        });

        Snow.paused = true;
    }
};

我还尝试用$('.snowflake').resume();替换每个函数，但它不起作用。

编辑：解决方案很简单。在马修用正确的方式指出我之后，当我坐下来做数学时，我在几分钟内解决了它。这是最终的公式。 http://i.stack.imgur.com/gs8mj.png

在我的情况下，恢复后的持续时间为DOCUMENT_HEIGHT * 5000 / ELEMENT.css('bottom');文档高度是由于元素将从顶部移动到底部而未暂停时所覆盖的距离。 5000是我在开始时选择的速度，元素的bottom属性是元素在恢复时将覆盖的距离。这使得速度不变并解决了问题。感谢大家的帮助。

如果您是试图自行获取等式的用户，只需将开头的速度与最后的速度等同，然后使用v = d / t来获得公式。

Answer 1

看起来要实现这一点，你需要使用queue和dequeue（以及clearQueue）：

这里有一些信息，有一个很好的小演示：

http://api.jquery.com/clearQueue/

基本上，您正在为动画创建一个队列，然后当有人点击暂停按钮并在他们点击恢复时再次排队时将其出列。

Answer 2

如果您使用jQuery 1.8及更高版本，则可以在animate方法中使用 progress 函数回调。
链接到动画文档：http://api.jquery.com/animate/

您可以将当前动画的状态保存在元素中，稍后再恢复。

示例（这是草稿，随意升级）：
链接到示例：http://jsbin.com/egemaTA/2/edit

<!DOCTYPE html>
  <html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        var $mydiv = $('div').animate({ bottom: '0' }, {
          duration : 5000,
          easing : 'linear',
          progress : function(animation, progress, remainingMs){
            $(this).data('stay', remainingMs);
          }
        });

        $('#stop').click(function(ev){
          $mydiv.stop();
        });
        $('#go').click(function(ev){
          $mydiv.animate({ bottom: '0' }, {
            duration : $mydiv.data('stay'),
            easing : 'linear',
            progress : function(animation, progress, remainingMs){
              $(this).data('stay', remainingMs);
            }
          });
        });


      });
    </script>
    <style>
      html, body{
        height : 100%;
      }
      div{
        position : absolute;
        bottom : 100%;
        width : 50px;
        height : 50px;
        background-color : lightblue;
      }
    </style>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body>
    <div></div>
    <button id="stop">Stop !</button>
    <button id="go">Go</button>
  </body>
  </html>

javascript中的动画暂停问题

2 个答案: