javascript - 如何 "animate"一个元素(元素符号)跟随路径到 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);
});