Question

所以我尝试使用jQuery创建一个非常简单的动画，但fadeOut的回调不会发生。

以下是代码：

var move = function(target, speed) {
    $(target).delay(200).animate({bottom: "-=20"},
        speed,
        function() {
            $(this).fadeOut(200, function() {
                $(this).css("bottom", "+=20");
            });
            $(this).fadeIn(200);
        }
    );
    move(target, speed);
};

move(".fa-arrow-down", 500);

我尝试了几种不同的方法，例如在控制台中查看它，设置各种断点（主要位于$(this).css("bottom", "+=20");，正好在此行之上，并在此行的正下方。）

我不确定为什么它没有发生。任何帮助表示赞赏，如果可以，请解释实际问题，以便我也可以学习。这是一个fiddle。

Answer 1

您需要将调用移至move(target, speed)以进入fadeIn的完整功能。

DEMO

var move = function (target, speed) {
    $(target).delay(200).animate({
        bottom: "-=20"
    },
    speed,

    function () {
        $(this).fadeOut(200, function () {
            $(this).css("bottom", "+=20");
        });
        $(this).fadeIn(200, function () {
            move(target, speed);


        });
    });
};

move(".fa-arrow-down", 500);

但我无法承担所有功劳...... cookie monster首先看到了递归错误。就像他说的那样，这很有效，因为每次调用move（）

都会增加延迟

正如我刚才所说，你立即调用move（）而不是等待用于回调。这意味着它以频率调用move（）等于调用.delay（）。animate（）所花费的时间，但没有等待他们完成。换句话说，将调用move（）甚至在第一个.delay（）完成之前数万次 - cookie monster

jQuery fadeOut回调永远不会触发

1 个答案: