Анимированная временная шкала с javascript

Question

Я пытаюсь создать эффект временной линии. Он будет иметь пару точек за каждый раз с обозначенным изображением внутри круга.

Я хочу, чтобы они были доступны для просмотра. Когда я нажимаю, я хочу, чтобы другое изображение (плоскость) переместилось из текущего местоположения туда, где оно нажато в течение 1 секунды, и сжимается и исчезает. Что-то похожее на следующий GIF.

Я нашел пару примеров, но не смог собрать их, чтобы достичь того, чего хочу. Я действительно много искал, но не мог решить это самостоятельно. Я разработчик iOS и не знаю о веб-разработке.

Буду признателен, если вы можете мне помочь в этом.

Answer 1

Дайте относительное положение на шкале времени. Затем вы можете получить положение щелкнутого круга и назначить его подвижному. Добавьте CSS-переходы, чтобы получить лучший визуальный результат.

Пример использования JQuery:

$(document).on("click", ".point", function() { 
    var $this = $(this); 
    var $abs = $(".is-absolute"); 

    $abs.css("top", $this.position().top); 
    $abs.css("left", $this.position().left); 
}); 

http://jsfiddle.net/dsr4esn3/