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

Question

我拥有的：

在屏幕上移动和移出的平面的绝对定位图像。

我需要什么：

我需要动画每10秒循环/重启一次，即平面在每个循环开始时只显示在默认的绝对位置。

问题：

我尝试了很多例子，但我能得到的最接近的是使用。{3}}示例使用.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

内调用该函数