0

我有一个文本动画（小提琴示例中的“重试”），问题是它仅在页面加载并且我需要它循环时才起作用。

这是小提琴的例子：http: //jsfiddle.net/uqcLn/49/

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

    move(0);
4

1 回答 1

1

好吧...玩了大约一个小时后，这已经很接近了...问题是您的移动功能陷入了一个巨大的循环，然后您永远不会取消它。看看我做了什么。在第一个动画的回调中，您再次移动它但重置样式，否则它最终会向左移动这么远，然后才能回到右侧。

然后我做到了，一旦你再次将鼠标悬停在墙上，它会重置所有内容，一旦你再次将鼠标悬停在路上，它就会启动重试功能。（我个人认为你错误地重命名了类，但无论如何）

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

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

于 2013-10-08T16:04:27.027 回答