Как сделать анимацию html5 при нажатии кнопки на веб-странице?

Question

У меня есть идея для интерактивной анимации, которую я хотел бы создать в html5.Я хочу иметь футбольное поле с трикотажными фигурами на нем, например, 4-4-2, и иметь разные варианты сбоку, чтобы изменить форму, скажем, на 4-5-1, а затем, когда эта кнопка нажата, на которой написано-5-1 Джерси будет переставлять на поле в эту форму.Любые идеи о том, как я мог сделать это ??

Заранее спасибо

Answer 1

http://jsfiddle.net/rlemon/3YRzS/

как упомянуто, jquery и animate.

Answer 2

Может быть возможно в некоторых браузерах с анимацией CSS3 Key Frames, как видно на сайте популярного журнала, например - http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

Answer 3

Самый простой и наиболее независимый способ сделать это - добавить функцию JavaScript к атрибуту onClick вашей кнопки или элемента, а затем заставить JavaScript перемещать игроков, редактируя их позиции,атрибуты и т. д.

Однако я бы порекомендовал использовать jQuery, так как это обычно проще.Затем вы должны привязать действие к идентификатору кнопки (атрибут id = "..." на вашем).Например:

$(document).ready(function() {
  $("mybuttonid").click(function(event){
    ...
  });
});