重新启动jQuery动画循环的绝对位置

Question

我拥有的：

绝对位置的平面图像，该平面在屏幕上移动和在屏幕上移动。

我需要的东西：

我需要动画每10秒循环/重新启动一次，即飞机在每个循环的开头位于其默认的绝对位置。

问题：

我尝试了许多示例，但是我可以获得的最接近的是使用此示例使用.Queue和.callee。它循环，但需要一个反向动画来重新定位图像。相反，我需要图像重新定位而不动画。

我的代码：

CSS动画以（需要为每个循环重新启动）...

<style>
#main_content_container{
width:800px;
margin:0 auto;
position:relative;
height:2000px;
}
#sprite_plane{
    position:absolute;
    left:-400px;
    top:400px;
    opacity:0;
    filter:alpha(opacity=0); /* For IE8 and earlier */
    }
</style>

jQuery动画...

<script>
  $("#sprite_plane").animate({
    opacity: 1,
    "left": "+=430px",
    "top": "-=530px",
  }, 1500 );
</script>

html ...

<div id="main_content_container">
    <img src="images/plane.png" alt="" width="120" height="120" id="sprite_plane" />
</div>

Answer 1

我相信这个递归功能应该做您想要的

function loopAnimation(doReset) {
    var $el = $("#sprite_plane");
    if (doReset) {
       $el.css({ left: "-=430px", top: "+=530px", opacity:0 });/*assume opacity is zero at start*/
    }
    $el.animate({
        opacity: 1,
        "left": "+=430px",
        "top": "-=530px",
    }, 1500, function() {
        setTimeout(function() {
            loopAnimation(true);
        }, 10000);
    });
}

在页面初始化代码中调用：

 loopAnimation(false);

之后，每个动画实例的完整回调将在setTimeout