我有一个看起来像这样的jQuery函数:
$.get(urlCall, function (data) {
$('#divId').children().fadeOut("slow", function() {
$('#divId').append(data);
$('#divId').fadeIn("slow");
});
});
问题是它在'#divId'下为每个孩子调用一次append和fadeIn行。我期待这条线
$('#divId').children().fadeOut("slow", function() {
淡出所有孩子,然后一次执行函数()。但是因为它正在为每个孩子执行一次函数(),所以我附加了许多我不想附加的行。
我确信必须有一种说法,“淡出所有孩子,然后做一次X”,但我似乎无法弄明白该怎么做。
帮助?
答案 0 :(得分:5)
您可以使用.promise()
$('#divId').children().fadeOut("slow").promise().done(function() {
$('#divId').append(data);
$('#divId').fadeIn("slow");
});
.promise()方法返回一个动态生成的Promise 一旦绑定到集合的某个类型的所有操作解决, 排队与否,已经结束。
默认情况下,键入" fx",表示已解析返回的Promise 当所选元素的所有动画都已完成时。
演示:Fiddle
答案 1 :(得分:2)
可靠地执行此操作的唯一方法是创建自己的函数,以跟踪已完成的动画数量,并与原始动画的数量进行比较。类似的东西:
var target = $("#divId"),
children = target.children();
$("#trigger").on("click", function () {
toggleFadeAll(children, function () {
$("#message").fadeToggle();
});
});
function toggleFadeAll(els, callback) {
var counter = 0,
len = els.length;
els.fadeToggle(function () {
if (++counter === len) {
callback.call(null);
}
});
}
DEMO: http://jsfiddle.net/jbE3C/
(这显然需要根据您实际想要发生的动画进行调整)
toggleFadeAll
会在所有fadeToggle
动画完成后调用回调。
当元素可能发生其他动画时,使用.promise()
失败(不会在正确的时间点执行所需的回调)。
答案 2 :(得分:1)
为什么不将衰落和追加分开呢?所以它会是
$.get(urlCall, function (data) {
$('.someElement').each(function(){
$('.fadeElement').fadeIn();
});
$('.otherElement').append(data)
});