complet est toujours appelé dans l'animation jquery

Question

Le rappel complet dans la fonction d'animation jquery est toujours appelé.
Je cherche un moyen de mettre l'animation en pause, puis de la redémarrer ou de la redémarrer toutes ensemble. et ne pas appeler complet. à moins qu'il ne se termine vraiment

<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

Essayez d'utiliser done, fail objet promise au sein .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

Vous manque un Speechmark de clôture sur votre paramètre de style innerdiv.

J'ai mis en place un violon pour démontrer lecture, pause & reset à 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'); 
})