Javascript 使动画循环

我有一个文本动画（“fiddle示例中的“重试”），它会跳起来。问题是，它只在页面加载时工作，我需要它循环

以下是小提琴的例子：

---

好的。。。在玩了一个小时后，这是我能得到的最接近的。。。问题是你的移动函数陷入了一个巨大的循环中，然后你永远不会取消它。看看我做了什么。在第一个动画的回调中，再次移动它，但重置样式，否则它会在返回到右侧之前向左移动很远

然后，我做了这样一次，一旦你再次鼠标悬停在墙上，它就会重置一切，一旦你再次鼠标悬停在路上，它就会启动重试功能。（就我个人而言，我认为你把班级改名错了，但不管怎样）

您遇到的最大问题是停止循环是

$（.white”）.html（“从这里开始！”如果您想与“重试”进行交换，则必须确保您正在更改相同的元素（跨度）。您所做的是覆盖span html，然后当您尝试在鼠标悬停功能中更改它时，没有什么可更改的

查看代码，如果您有任何问题，请询问

$(".wall").hover(function () {
    $(this).css("background", '#000');
    //clear the sad face and stop the animation and reset text
    $('#highlight_lose').fadeOut(1000);
    $(".white span").removeAttr('style');
    $(".white span").clearQueue().stop().finish();
    $(".white span").html("START HERE!");
})

$(".way").bind('mouseenter', function () {
    $('#highlight_lose').fadeIn(1000);
    $('.wall').css("background", '#fff');
    $(".white span").html("Try again");

    function move() {
        //Animate this way so when its done going left it starts going right. Then when
        //its done going right clear the style so it goes back to the starting positon
        //and call it again so it loops until you hit the path.
        $(".white span").animate({
            "margin-left": "-=10px"
        }, 300, function () {
            $(".white span").animate({
                "margin-left": "+=10px"
            }, 300, function () {
                $(".white span").removeAttr('style');
                move();

            });
        });
    }
    //Clear everything before you call move again so it doesnt over animate.
    $(".white span").removeAttr('style');
    $(".white span").clearQueue().stop().finish();
    move();
})

演示：
哈哈，非常感谢您的帮助和时间！！对我来说，这是一个诀窍现在对我来说唯一的问题是，它是钢，允许从正方形“1”开始迷宫，就像我这里的例子u：你的意思是它允许你从任何地方开始迷宫？？你希望它只能从1号方块开始吗？？编辑：开玩笑吧，我没看到你放在里面的1。我想你只想从第一个广场开始？是的。。。我的意思是它允许你从几乎任何地方开始迷宫，我不想让它发生。只有当鼠标完全离开主分区时，我希望迷宫会刷新，我想你抓到我了…好的，看看这个。。。我添加了一个id，并在开始框上添加了一个事件。唯一的问题是，一旦你搞砸了，你可以从头开始，但黑色只会在你离开第一个盒子时填充。这很奇怪，但你可以玩玩它。阅读我在代码中的注释，看看我在做什么。问题是要让它只从前面开始，你必须取消绑定使方块变黑的调用，然后在开始键上重新绑定。这很烦人，因为一旦你搞糟了，如果你不解开它，你就可以从迷宫的任何地方开始。因此，你必须尝试重新绑定它，这是我能很快找到的唯一解决方案
$(".wall").hover(function () {
    $(this).css("background", '#000');
    //clear the sad face and stop the animation and reset text
    $('#highlight_lose').fadeOut(1000);
    $(".white span").removeAttr('style');
    $(".white span").clearQueue().stop().finish();
    $(".white span").html("START HERE!");
})

$(".way").bind('mouseenter', function () {
    $('#highlight_lose').fadeIn(1000);
    $('.wall').css("background", '#fff');
    $(".white span").html("Try again");

    function move() {
        //Animate this way so when its done going left it starts going right. Then when
        //its done going right clear the style so it goes back to the starting positon
        //and call it again so it loops until you hit the path.
        $(".white span").animate({
            "margin-left": "-=10px"
        }, 300, function () {
            $(".white span").animate({
                "margin-left": "+=10px"
            }, 300, function () {
                $(".white span").removeAttr('style');
                move();

            });
        });
    }
    //Clear everything before you call move again so it doesnt over animate.
    $(".white span").removeAttr('style');
    $(".white span").clearQueue().stop().finish();
    move();
})