Snap SVG.animate callback fires immediately

Question

I am trying to pass a set of arguments to the animate function in Snap SVG, including a callback function. However, the callback (in this case, the removal of the element) is triggered immediately when pressed, and not after the animation is completed. As now, the element is deleted, and the animation function errors, because the element no longer exists. Any ideas?

var theCallback = theApp.destroyAnElement("#"+ theParentID); //The function call theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback); // The animate function animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) { var s = Snap.select("#"+ parentSVG), theElement = s.select(element); setTimeout(function() { theElement.stop().animate(animationValues, duration, easing, function() { callback; }); }, initialDelay); } 

UPDATE

 theCallback = function () { theApp.destroyAnElement("#"+ theElementID); }; theAnimationFunctions.animateSingleSVGElementWithSnap('.stopped','#svg-container',{transform: 's1,0'}, 500, mina.backin, 0,0,theCallback); theAnimationFunctions = { animateSingleSVGElementWithSnap: function(element, parentSVG, animationValues, duration, easing, initialDelay, callback) { var s = Snap.select("#"+ parentSVG), theElement = s.select(element); setTimeout(function() { theElement.stop().animate(animationValues, duration, easing, function() { callback(); }); }, initialDelay); } 

With the above updates, I now get an error message when the animation ends:

 "Uncaught TypeError: callback is not a function" 

Answer 1

You must wrap the callback with an anonymous function to prevent it from starting immediately:

 var theCallback = function () { theApp.destroyAnElement("#"+ theParentID); }; 

And then name it as a function:

 theElement.stop().animate(animationValues, duration, easing, function() { theCallback(); // <-- notice the parenthesis });