you can use the animate method of zepto to implement the animation, and you can listen to execute the callback function when the animation is completed
animate (properties, {duration: msec, easing: type, complete: fn})
if you want to execute the callback function during the element change, use setTimeout to implement
< hr class= "callback" >
The
animate
principle of
zepto
is to add transition
transition of css3
or animation
animation of css3
to realize
, both of which can only monitor the end time of animation, not the motion process
if you want to obtain the real-time position of the element, you can use setInterval
or setTimeout+ Recursive
to achieve real-time monitoring.
;(function () {
var timer = null;
function listenMove() {
var that = this;
timer = setInterval(function () {
that.trigger('elem_move');
}, 0)
}
$.fn.myanimate = function (properties, duration, ease, callback, delay) {
listenMove.call(this);
return $(this).animate(properties, duration, ease, function () {
clearInterval(timer);
callback && callback.apply(this, arguments)
}, delay)
}
})();
$(elem).myanimate({
left: 1000
}, 5000);
$(elem).on("elem_move", function (e) {
console.log(this)
});