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/

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