jQuery children(）.fadeOut(） 然后执行单个函数

jQuery children().fadeOut() then execute a single function

本文关键字：单个 函数 执行 fadeOut children jQuery 然后      更新时间：2023-09-26

我有一个jQuery函数，看起来像这样：

$.get(urlCall, function (data) {
    $('#divId').children().fadeOut("slow", function() {
        $('#divId').append(data);
        $('#divId').fadeIn("slow");
    });
});

问题是它在"#divId"下为每个孩子调用一次追加和淡入行。我期待这条线

$('#divId').children().fadeOut("slow", function() {

淡出所有子项，然后执行函数 （） 一次。但是由于它为每个孩子执行一次函数（），所以我附加了很多我不想附加的行。

我敢肯定一定有办法说，"淡出所有的孩子，然后做一次X"，但我似乎不知道该怎么做。

帮助？

你可以使用 .promise（）

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

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

默认情况下，类型为"fx"，这意味着返回的 Promise 已解析 当所选元素的所有动画都已完成时。

对于反对者

演示：小提琴

可靠地

做到这一点的唯一方法是创建自己的函数，该函数跟踪已完成的动画数量，并与原始动画的数量进行比较。像这样：

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);
        }
    });
}

演示：http://jsfiddle.net/jbE3C/

（这显然需要根据您实际想要发生的动画进行调整）

toggleFadeAll将调用所有fadeToggle动画完成后提供的回调。

当元素可能发生其他动画时，使用 .promise() 会失败（不会在正确的时间点执行所需的回调）。

为什么不直接将淡入淡出和附加分开呢？ 所以它会是 

$.get(urlCall, function (data) {
    $('.someElement').each(function(){
         $('.fadeElement').fadeIn();
    });
    $('.otherElement').append(data)
});
相关文章：