Я пытаюсь создать определенный эффект - когда по существу различные элементы перемещаются внутри родительского элемента. Общее намерение состоит в том, чтобы у меня было своего рода движение в стиле PONG, когда элементы сталкиваются с краем родительского объекта и перенаправляют себя. (возможно, даже сталкиваясь друг с другом).
Это код, над которым я работал (который, как я знаю, не имеет ничего общего с тем, что я описал выше). На этом этапе я просто пытаюсь оживить движение и затем получить доступ к новым верхним и левым координатам по порядку. чтобы определить, превысил ли элемент установленные пределы.
$(document).ready(function() {
$('.collisionmenu li')
.attr("left", 0).attr("top", 0)
.attr("xforce", 10).attr("yforce", 10)
.click(function() {
//alert($(this).attr("top"));
if($(this).attr("top") > 50) $(this).attr("yforce", -10);
$(this).animate({
left: '+=' + $(this).attr("xforce"),
top: '+=' + $(this).attr("yforce")
}, 100);
});
});
Проблема, с которой я столкнулся, заключается в том, что атрибут top всегда имеет значение «0», несмотря на несколько итераций выполняемой функции «click ()» и видимое движение рассматриваемого элемента.
Я предполагаю, что JQuery не изменяет свойства DOM элементов, когда он анимирует движение и данные о перемещении хранятся где-то еще. Так что мне нужно знать, как я могу узнать обновленную позицию порядка анимированных объектов, чтобы я мог выполнять изменения на основе текущих значений / позиции.
Кроме того, как мы надеемся, это ясно из кода, я занялся настройкой изобретенных свойств "xforce" и "yforce" для каждого элемента, чтобы приспособиться к различным скоростям, когда анимируется более одного элемента. Это приемлемая практика, или я могу столкнуться с проблемами, делая это на более позднем этапе?
Я не уверен, что такого рода вещи уже доступны (поиски ничего не дали), но, честно говоря, меня больше интересует понимание работы, чем фактическое достижение эффекта. Это скорее учебное упражнение.
Большое спасибо и извинения, если это описание не совсем понятно.