Javascript loop - скрыть анимированный div

Я попытаюсь сделать это как можно более наглядным, мои извинения заранее, если у меня возникнут трудности с объяснением того, что именно я пытаюсь сделать.Javascript loop - скрыть анимированный div

Написано Описание:

Так я создаю веб-основе игру в JavaScript. Эта игра - игра-шутер из 2 игроков. До сих пор, когда игрок «стреляет» другим игроком, он генерирует анимированный div, который идет с самого начала (у пушки игрока1) до конца экрана, где он затем удаляется (используя 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 вариант .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>

источник

2016-01-12 03:31:35 guest271314

. Нужно ли теперь определять переменную как маржу для #bullet? –

_ «Нужно ли теперь определять переменную как margin для #bullet?» _ 'Now' - это параметр« Number », представляющий единицу анимированного свойства; например, «margin-left» приращение во время анимации до «100» или «100%». Если изменить '' 100% "' на '" 50% "', 'now' будет увеличиваться до 50. См. Http://api.jquery.com/animate/#animate-properties-options – guest271314

_ «Итак, как у вас есть это сейчас, проверяет, превышает ли край значение 70» _ Да. _ "или мне нужно определить сейчас или что-то в этом роде?" _ Нет, 'now' определяется jQuery по умолчанию; должен соответствовать «unit», как «Number», анимации свойства. – guest271314

Использование setTimeout() для этой цели,

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

setInterval() будет вызывать прилагаемый код для каждого временного интервала, который вы дали

источник

2016-01-12 03:30:50

Javascript loop - скрыть анимированный div

ответ

Смежные вопросы