How to “animate” an element(bullet) to follow a path to another element(target) in jquery

Question

I want to animate an image to follow the shortest path to another element after clicking on another element.

How to do that? Is there already some handy jquery library for this?

What I mean? Imagine a bullet(image) following the shortest path toward the target(div)

I have this HTML code:

<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>

How to do that?

Answer 1

I would do something like this :

// 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);
});