爲jQuery動畫循環重新啓動絕對位置

Question

我有什麼：

絕對定位的平面圖像在屏幕上移動和移出。

我需要什麼：

我需要動畫循環/重新啓動每10秒即飛機剛剛出現在其默認的絕對位置在每個循環的開始。

問題：

我已經試過無數的例子，但我可以得到最接近的是使用使用.queue和.callee this例子。它循環，但需要反向動畫來重新定位圖像。相反，我需要圖像重新定位而不需要動畫。

我的代碼：

動畫開頭（並且需要爲每個循環重啓）的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

I相信這個遞歸函數應該做你想做的

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