jQuery 本身的动画只有停止的功能,一但停止(stop)后就无法自动接着做未做完的动画内容。 因此Pause插件扩充了animate() 的功能,让它可以支持暂停(pause)及恢复(resume)动画。
这个插件覆盖jQuery的默认的animate()方法,任何加载了这个插件的动画都将支持Pause暂停。两个新的不带任何参数的方法被添加到每一个jQuery对象:pause()和resume()。
例如:
$box.hover(function() {
$box.pause();
}, function() {
$box.resume();
});
demo演示地址:http://tobia.github.com/Pause/
(function() { var $ = jQuery, pauseId = 'jQuery.pause', uuid = 1, oldAnimate = $.fn.animate, anims = {}; function now() { return new Date().getTime(); } $.fn.animate = function(prop, speed, easing, callback) { var optall = $.speed(speed, easing, callback); optall.complete = optall.old; // unwrap callback return this.each(function() { // check pauseId if (! this[pauseId]) this[pauseId] = uuid++; // start animation var opt = $.extend({}, optall); oldAnimate.apply($(this), [prop, $.extend({}, opt)]); // store data anims[this[pauseId]] = { run: true, prop: prop, opt: opt, start: now(), done: 0 }; }); }; $.fn.pause = function() { return this.each(function() { // check pauseId if (! this[pauseId]) this[pauseId] = uuid++; // fetch data var data = anims[this[pauseId]]; if (data && data.run) { data.done += now() - data.start; if (data.done > data.opt.duration) { // remove stale entry delete anims[this[pauseId]]; } else { // pause animation $(this).stop(); data.run = false; } } }); }; $.fn.resume = function() { return this.each(function() { // check pauseId if (! this[pauseId]) this[pauseId] = uuid++; // fetch data var data = anims[this[pauseId]]; if (data && ! data.run) { // resume animation data.opt.duration -= data.done; data.done = 0; data.run = true; data.start = now(); oldAnimate.apply($(this), [data.prop, $.extend({}, data.opt)]); } }); }; })();