延迟,直到jQuery动画完成
问题描述:
我做了一个启动画面的jQuery插件。它用了jQuery的动画功能,并通过以下initalized和触发:延迟,直到jQuery动画完成
$('#temperature_splash').splashScreen();
$('.tempGraphButton').click(function() {
$('#temperature_splash').splashScreen('splash', 300);
//Here, I would like to make an ajax request when the animation has finished
}
我想提出一个Ajax请求在插件中的动画结束后,但我不知道怎么办。有没有人有什么建议?插件代码的
大纲
$.fn.splashScreen = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
}
var methods = {
init: function() {
//Some initializations
},
splash: function (time) {
//Setting some properties
splashScreenContent.animate({
width: width,
left: leftPos
}, time).animate({
height: height,
top: topPos
}, time);
return false;
}
}
})(jQuery);
答
只需添加一个回调
var methods = {
init: function() {
methods.splash(1000, function() {
//do something when animation is finished
methods.ajax();
});
},
splash: function (time, callback) {
splashScreenContent.animate({
width: width,
left: leftPos
}, time).animate({
height: height,
top: topPos
}, time, function() {
if (typeof callback==='function') callback.call();
});
return false;
},
ajax: function() {
//do ajax stuff
}
}
这只是一个例子,你必须弄清楚哪些选项传递以及如何将其绑定到您的插件自己。
答
难道你不能绑定到jQuery中的.done功能吗?
methods.done(function(){ do your code here for the ajax })'
+0
自制插件不一定有权访问promise,除非您将其添加到插件中。 – adeneo 2012-08-03 18:33:58
答
,因为这些调用是异步的,你可以把你的Ajax代码只是飞溅代码前收盘为防溅功能之后的代码将闪功能
完美里面的代码之前执行。现在它可以工作。 – olif 2012-08-03 18:36:49