Question

我有一个文本动画（在小提琴示例中“再试一次”）跳出问题的是它只在页面加载时才有效，我需要它循环。

var directions = ["-=10px", "+=10px"];
    function move(i){
        $(".white span").animate({ "left": directions[i] }, 300, function(){
             move((i ===0)? 1 : 0);
        });
    }

    move(0);

Answer 1

好的......玩了这个就好了一个小时，这就像我能得到它一样接近......问题是你的移动功能让自己陷入一个巨大的循环然后你永远不会取消它。看看我做了什么。在第一个动画的回调中，你再次移动它但重置了风格，否则它会向左移动到左边，然后才能回到右边。

然后我做到了这一点，一旦你再次将鼠标移到墙上，它就会重置所有内容，一旦你再次将鼠标移到路上，它就会重新开始尝试。（我个人认为你把这些课程重命名为错误但无论如何）

你遇到的最大问题是停止循环$(".white").html("START HERE!");如果你想与Try Again互换，那么你必须确保你改变了相同的元素（跨度）。你所做的是覆盖跨度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();
})

演示：http://jsfiddle.net/uqcLn/55/

让动画循环

1 个答案: