对于downvoter

Question

我有一个看起来像这样的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”，但我似乎无法弄明白该怎么做。

帮助？

Answer 1

您可以使用.promise()

$('#divId').children().fadeOut("slow").promise().done(function() {
    $('#divId').append(data);
    $('#divId').fadeIn("slow");
});

.promise（）方法返回一个动态生成的Promise   一旦绑定到集合的某个类型的所有操作解决，   排队与否，已经结束。

默认情况下，键入＆＃34; fx＆＃34;，表示已解析返回的Promise   当所选元素的所有动画都已完成时。

对于downvoter

演示：Fiddle

Answer 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()失败（不会在正确的时间点执行所需的回调）。

Answer 3

为什么不将衰落和追加分开呢？所以它会是

$.get(urlCall, function (data) {
    $('.someElement').each(function(){
         $('.fadeElement').fadeIn();

    });

    $('.otherElement').append(data)
});

jQuery children（）。fadeOut（）然后执行单个函数

3 个答案:

对于downvoter