在jquery动画中总是调用complete

The complete callback in the jquery animation function always gets called.
Im looking for a way to pause the animation then start back up or just restart it all together. and not call complete. unless it truly completes

始终调用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();
});

2 个解决方案

#1

You're missing a closing speechmark on your innerdiv style parameter.

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

I've set up a fiddle to demonstrate play, pause & reset at https://jsfiddle.net/k7wmzyn8/3/

我在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');
})

#2

Try using done , fail promise object within .animate()

尝试在.animate()中使用done,fail promise对象

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

#1