jQuery children()。fadeOut()然后执行单个函数

时间:2013-10-17 16:25:02

标签: javascript jquery

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

帮助?

3 个答案:

答案 0 :(得分:5)

您可以使用.promise()

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

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

     

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

对于downvoter

演示: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)
});