Question

我将尝试尽可能使其具有描述性，如果我难以解释我正在尝试做什么，我会提前道歉。

书面说明：

所以我在javascript中创建一个基于Web的游戏。这个游戏是一个2人射击游戏。到目前为止，当一个玩家“射击”另一个玩家时，它产生一个动画div，从它的开始（在玩家1的枪口）到屏幕的末尾然后被移除（使用从它产生的div中的removeChild）。）

问题是，当子弹“击中”玩家时，它会一直持续到屏幕结束。我的代码确实注册子弹是否击中了玩家，但是当它击中玩家时，我希望它在玩家通过玩家后立即消失，以便它具有穿透玩家的效果而不仅仅是经过玩家。

现在让我更具体一点。

$("#bullet").animate({
    marginLeft: '100%'
}, 1000, function(){            
    document.getElementById("thegame").removeChild("#bullet");
});

基本上这是产生'bullet'的代码

现在可以说，我希望通过做一些循环来检查它的位置，因为动画div正在旅行时，它的余量超过70％后，子弹消失了。

我该怎么做？（子弹是#bullet）我尝试为此做一个循环，但我必须失败，因为它不起作用。

Answer 1

为此目的使用setTimeout()，

function myfun(){
   setTimeout(function(){$("#welcome").show(100)}, 2000);
   setTimeout(function(){$("#welcome").hide(500)}, 7000);
}

setInterval()将为您提供的每个时间间隔调用提供的代码

Answer 2

使用step，.animate()

的.stop()选项

var money = $("#thegame span")[0];

$("#bullet").animate({
  marginLeft: '100%'
}, {
  duration: 1000,
  step: function(now, fx) {
    // calling `.stop()` triggers `.fail` callback
    if (now > 70) $(fx.elem).stop()
  },
  done: function() {
      document.getElementById("thegame").removeChild(money);
  },
  fail: function() {
    document.getElementById("thegame").removeChild(money);
    console.log(this, this.style.marginLeft)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="bullet">abc</div>
<div id="thegame"><span>thegame</span></div>

Javascript循环 - 隐藏动画div

2 个答案: