How can you use Zepto to call a function when an animation ends?

Question

I'm currently writing an application using Zepto and phonegap, and I need to know how to call a function when an animation ends. Unfortunately, I can't really figure it out from the examples given or the documentation. So far, the closest I've been able to come is:

$('img').anim({ translatex: '500px', translatey: '500px', opacity: 1, complete: alert("Hello!") }, 2, 'linear');

Which will trigger the alert before the animation. Does anyone know how to fix this so that the alert will trigger after?

Answer 1

The callback function should be the last parameter of the anim call and you should wrap the alert in a function expression:

$('img').anim({ 
  translatex: '500px', 
  translatey: '500px', 
  opacity: 1        
}, 2, 'linear', function() { alert("Hello!") } );

Answer 2

One other possibility to help here is webkitTransitionEnd - http://www.cuppadev.co.uk/the-trouble-with-css-transitions/