jquery动画从右到左

Question

我正在尝试使用 css sprites 制作动画（请告诉我我的方法是否正确），请检查以下 jquery 代码...

$(document).ready(function() {
    setTimeout("boat()",20);
});
function boat(){
    $("#boat").animate({right:"+=110%"},20000).css("background-position","0 0").animate({left:"+=110%"},20000).css("background-position","0 -68px")
    setTimeout("boat()",20000);
}

css：

#boat {
    margin-top:160px;
    position:absolute;
    margin-left:100%;
    width:150px;
    height:68px;
    background-image:url(plane.png);
    background-repeat:no-repeat;
}

动画效果完美（从右到左，从左到右），但有一个小问题，css sprite 没有按预期工作。它只占用这个属性.css("background-position","0 -68px")

Answer 1

这是因为您将所有内容都应用到一个中。 .css("背景位置","0 0") 和 .css("背景位置","0 -68px") 你想达到什么目标？动画结束不应该是回调吗？

试试这个：

 $(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=110%"},10000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=110%"},10000, boat);
    });
}

你可以在这里查看：http://jsfiddle.net/7GV9G/20/

这将是连续的。从右到左比从左到右再比一次，永远循环。如果您不想只使用一次，请从第二个动画中删除船回调。

Answer 2

您好，正如您在上面提到的发布我的答案 :) 看到这个：http://jsfiddle.net/UzLxZ/9/show/ && 代码在这里：http://jsfiddle.net/UzLxZ/9/ && 我之前的启动是这样的：http://jsfiddle.net/5dqwP/1/

这是另一个版本，你完全需要http://jsfiddle.net/UzLxZ/20/show/（等待蓝色框离开屏幕然后回来）或 http://jsfiddle.net/UzLxZ/21/show/ && 代码在http://jsfiddle.net/UzLxZ/20 这里;你可以到处玩，让它漂亮。 :)

进一步修改

http://jsfiddle.net/8sVDE/ - 这可能会给你更多的想法。

** http://archive.plugins.jquery.com/project/Pause-Resume-animation 要么 ** The way to stop and continue animation while mouseover and mouseout in JQuery

确切地知道您在寻找什么。

希望这会有所帮助：（将鼠标悬停在蓝色框上，您将获得完整的重复）

所以，这个 jsfiddle 准确地向您展示了您想要的内容，即 引用 - “我想暂停然后在鼠标悬停时恢复并在 1 次成功运行后停止（意味着完成全部功能，从右到左，从左到对）"

如果这有帮助，请告诉我，祝你愉快，干杯！

jQuery 代码

$(document).ready(function() {
    boat();
});
function boat(){
    $("#boat").css("background-position","0px 0px").animate({right:"+=100%"},1000, function() {
        $("#boat").css("background-position","0px -68px").animate({right:"-=100%"},1000).stop();
    });
   // alert('foo');
}



$("#boat").mouseover(function(){
   boat(); 

});
​