1 
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(); 我想让它们作为循环运行。有人帮忙吗？

4

2 回答 2

4

它确实返回了，但它没有任何关系，它已经动画化并淡出。

在该功能中添加警报并自己查看。

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

现场演示

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

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

只要确保this在通话之间保留。

于 2012-05-30T21:14:36.193 回答
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();
});

演示

于 2012-05-30T21:29:51.677 回答