Javascript loop - 隱藏動畫div

我將盡量使這個描述儘可能，如果我有困難解釋什麼是我正在嘗試做什麼，我提前道歉。Javascript loop - 隱藏動畫div

書面說明：

所以我創建在JavaScript中基於Web的遊戲。這個遊戲是一個2人射擊遊戲。到目前爲止，當一個玩家「射擊」另一個玩家時，它會產生一個動畫div，從其開始（在player1的槍支）到屏幕結束，然後被移除（使用removeChild從它生成的div ）

問題是，當子彈「擊中」播放器時，它會一直持續到屏幕結束。我的代碼確實記錄了子彈是否擊中了玩家，但是當它擊中玩家時，我希望它在玩家或玩家通過玩家之後消失，以便它具有穿透玩家的效果而不是僅僅通過播放器。

現在讓我來更具體一點。

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

基本上這是一個滋生的「子彈」的代碼

現在可以說，我希望得到子彈消失它的後緣經過70％做某種循環來檢查其位置爲動畫div正在旅行..

我該怎麼做？（子彈是#bullet）我試着做一個循環，但我必須失敗，因爲它沒有工作。

來源

2016-01-12 Jason Rigley

'$（this）.remove（）'而不是'document.getElementById（「thegame」）。removeChild（「＃bullet」）;' –

當玩家被子彈擊中時，你是否執行了一些代碼？ $（「＃bullet」）。remove（）應該在這種情況下工作 – IrkenInvader

使用.remove（）在Internet Explorer上不起作用，很遺憾 –

使用step選項每個時間間隔提供的代碼，.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>

來源

2016-01-12 03:31:35 guest271314

現在我需要將變量定義爲#bullet的邊距嗎？ –

_「現在我需要將變量定義爲#bullet的邊距嗎？」_' now'是代表動畫屬性單位的Number參數;例如，在動畫過程中'margin-left'增加到'100'或''100％''。如果將''100％''改爲''50％''，'now'會增加到'50'。請參閱http://api.jquery.com/animate/#animate-properties-options – guest271314

_「那麼你現在怎麼做，檢查邊緣是否大於70」_是的。 _「或者我是否需要定義現在或類似的東西？」_否，'now'默認由jQuery定義;應該與被動畫的屬性值的'Number'相對應。謝謝... – guest271314

使用setTimeout()爲此，

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

setInterval()將調用的，你給的.animate()

來源

2016-01-12 03:30:50

Javascript loop - 隱藏動畫div

回答

相關問題