CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John Doeherskij
John Doeherskij

Reputation: 2577

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

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?

Upvotes: 0

Views: 82

Answers (1)

Amin Adel
Amin Adel

Reputation: 1028

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

Upvotes: 1

Related Questions