如何“动画化”一个元素（子弹）以遵循jQuery中另一个元素（目标）的路径

Question

我想对图像进行动画处理，使其在单击另一个元素后遵循最短路径到达另一个元素。

怎么做？ 已经有一些方便的jQuery库了吗？

我的意思是？ 想象一下沿着目标（div）的最短路径的项目符号（图像）

我有这个HTML代码：

<style>
    .click-me { 
       display: block; 
       float: left; 
       position: relative;
       width: 10px;
       height: 10px;
    }
    .image-will-go-after-me-after-click { 
       display: block; 
       float: left; 
       position: fixed;
       top: 0;
       left: 0;
       width: 50px;
       height: 50px;
       background: red;
    }
</style>

<img class="click-me" src="bullet.png">
<div class="image-will-go-after-me-after-click">
     <img class="i-will-be-hit" src="target.png">
</div>

怎么做？

Answer 1

我会做这样的事情：

// js :
$('.click-me').click(function() {
    var target_top = $('.i-will-be-hit').offset().top;
    var target_left = $('.i-will-be-hit').offset().left;
    $(this).animate({
        'top': target_top + 'px',
        'left' : target_left + 'px'
    }, 1000);
});