0

是）我有的：

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

我需要的：

我需要动画每 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>
4

1 回答 1

2

我相信这个递归函数应该做你想做的

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);

After that the complete callback of each instance of animation will call the function within a setTimeout

于 2012-10-30T18:12:00.043 回答