Question

function character_1() {
    $("#character_1").animate({"top": "0"}, 3000, function() {
        $(this).fadeOut(2000);
        character_2();
    });
};

function character_2() {
    $("#character_2").animate({"top": "0"},3000, function() {
        $(this).fadeOut(2000);
        character_3();
    });
};

function character_3() {
    $("#character_3").animate({"top": "0"},3000, function() {
        $(this).fadeOut(2000);
        character_1();
    });
};

$(document).ready(function() {
    character_1();
});

上面的代码。它不会返回到character_1（）;我想让它们作为循环运行。有人帮忙吗？

Answer 1

它确实返回，但它无关，它已经完全动画和淡出。

在该功能中发出警报并自行查看。

function character_1() {
    alert("I'm back!!!"); // <<=====================
    $("#character_1").animate({"top": "0"}, 3000, function() {
        $(this).fadeOut(2000);
        character_2();
    });
};

Live DEMO

如果您想切换元素，请使用toggle：

$(this).toggle(2000); // instead of "fadeOut(2000)";

请确保在通话之间保留this。

Answer 2

正如我在评论中提到的：你的循环很好，但是在执行character_3()之后所有元素都会淡出，所以你没有看到返回character_1()。您需要先将动画重置为原始状态，然后才能调用character_1()。请查看下面的示例，了解如何将其设置回原始状态。

由于fadeOut动画，测序也很少，所以我在fadeOut回调中调用了下一个动画，以便正确排序。

编辑：我做了一些优化并使用了计时器而不是无限循环。检查下面，

可以处理任意数量的框而无需更改代码

$(function() {
    var $chars = $('.chars');
    var curIndex = 0, charTop = 0;

    function animateChars() {
        setTimeout(function() {
            if (curIndex >= $chars.length) {
                curIndex = 0;
                if (charTop == 200) {
                    charTop = 0;
                } else {
                    charTop = 200;                    
                }
                $.when($chars.fadeIn(2000)).then(animateChars());
            } else {
                console.log(curIndex);
                $chars.eq(curIndex).animate({
                    "top": charTop
                }, 3000, function() {
                    $(this).fadeOut(2000, function() {
                        curIndex++;
                        animateChars();
                    });
                });
            }

        }, 100);
    }
    animateChars();
});

DEMO

如何使用jQuery循环函数

2 个答案: