动画方法中的回调函数
动画方法中的回调函数
提问于 2015-08-06 16:46:36
我正在使用下面的动画来产生效果，以便在calendar.Here中切换到下一个月或前一个月，因为我使用了if-else语句作为适当的动画效果；在这里我如何使用回调函数，以便在动画完成后产生某些效果。
$('.open').each(function (index) {
if ($('#' + (firstDay + index)).html() < 10) {
$('#' + (firstDay + index)).animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left + 7,
}, (400 + (25 * index)));
} else {
$('#' + (firstDay + index)).animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left,
}, (400 + (25 * index)));
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-06 16:49:37
您可以从jQuery对象获得动画承诺，并在所有相关的动画队列(即所有$('.open')元素上)为空时使用always()进行回调。
例如：
$('.open').each(function (index) {
if ($('#' + (firstDay + index)).html() < 10) {
$('#' + (firstDay + index)).animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left + 7,
}, (400 + (25 * index)));
} else {
$('#' + (firstDay + index)).animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left,
}, (400 + (25 * index)));
}
}).promise().always(function(){
// Do stuff here on completion of all animations
});备注：
- 您可以在动画承诺上使用
done，但是，如果动画从未启动*(例如，如果它已经处于最后状态)，那么它将不会启动。始终使用always():) - 您的代码可以通过几种方式变得简单和快速。例如，使用临时变量而不是重新运行jQuery选择器。
例如：
$('.open').each(function (index) {
var $control = $('#' + (firstDay + index);
if ($control.html() < 10) {
$control.animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left + 7,
}, (400 + (25 * index)));
} else {
$control.animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left,
}, (400 + (25 * index)));
}
}).promise().always(function(){
// Do stuff here on completion of all animations
});这进一步减少到：
$('.open').each(function (index) {
var $control = $('#' + (firstDay + index);
$control.animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left + ($control.html() < 10) ? 7 : 0,
}, (400 + (25 * index)));
}
}).promise().always(function(){
// Do stuff here on completion of all animations
});Stack Overflow用户
发布于 2015-08-06 16:49:43
根据jQuery文档：http://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
所以这里是：
$('#' + (firstDay + index)).animate({
top: pos[firstDayPrevious + index].top,
left: pos[firstDayPrevious + index].left + 7,
},(400 + (25 * index)), function()
{
// callback function
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31861408
复制相关文章
相似问题
腾讯云开发者
