Question

总是调用jquery动画函数中的完整回调我正在寻找暂停动画的方法然后开始备份或者只是重新启动它。而不是打电话完成。除非它真的完成

<div id="outerdiv" style="width:500px">
     <div id="innerdiv" style="width:0px;></div>
</div>
<input value="stop" id="btnstop" type="submit" />

$('#innerdiv').animate({ width: "100%" }, { 
    queue: false, 
    duration: 90000, 
    complete: function () { /* always hits after 90 secs even when stop is called.  */ } });

$('#btnstop').click(function(){
    $('#innerdiv').stop();
});

Answer 1

尝试在done

中使用fail，promise .animate()个对象

var innerDiv = $("#innerdiv");

function startStop(duration, props) {
  return innerDiv.animate({
    width: props
  }, {
    queue: false,
    duration: duration,
    done: function(promise) {
      // do stuff when animation completed
      console.log("done", promise, duration, props);
      alert("complete")
    },
    fail: function(promise) {
      // continue original `duration` set 
      // minus animation `duration` completed
      $(this).data("d", promise.opts.duration - ($.now() - promise.startTime));
      console.log("stopped"
                 , promise 
                 , promise.opts.duration
                 , this.style.width)
    }
  });

}

$("#btnstop").click(function() {
  innerDiv.stop(true, false);
});

$("#btnstart").click(function() {
  var duration = innerDiv.data("d") || 9000;
  startStop(duration, "100%")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="outerdiv" style="width:500px">
  <div id="innerdiv" style="width:0px;height:50px;border:1px solid blue;"></div>
</div>
<input value="stop" id="btnstop" type="button" />
<input value="start" id="btnstart" type="button" />

Answer 2

您在内部样式参数上缺少结束语音标记。

我已经设置了一个小提琴来演示播放，暂停和播放重置为https://jsfiddle.net/k7wmzyn8/3/

var div = $('#innerdiv');

$('#play').on('click', function(){
    div.animate({ width: "100%" }, { 
        duration: 5000,
        queue: false,
        complete: function() { 
            alert('complete called');
        } 
    });
})

$('#pause').on('click', function(){
    div.stop();
})

$('#reset').on('click', function(){
    div.css('width', '0');
})

在jquery动画中总是调用complete

2 个答案: