如何动画＆＃34;一个元素（项目符号），用于跟踪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);
});