用javascript动画的时间轴

Question

我正在尝试创建一些时间线效果。每次在圆圈内指定的图片时会有几个点。

我希望它们可以点击。当我点击时，我希望另一张图片（平面）从当前位置移动到1秒内点击的位置并缩小并消失。与GIF类似的东西。

我找到了几个例子，但我无法将它们组合在一起以达到我想要的效果。我经常搜索很多，但无法自己解决。我是iOS开发人员，没有Web开发背景。

如果你能帮助我，我将不胜感激。

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/