Animating the movement of a <div> to another <div>

Question

I'm trying to learn jQuery and am tinkering around with a little project to try to learn through practice, but I'm stuck on how to animate the movement of one div to another div.

To clarify, when I click on one div, I would like a different div to move to the div that I clicked on. I'm using appendTo() to move him there, but as you already know, the movement is instant, and I would like to animate the movement.

Here is a fiddle of what is happening currently: https://jsfiddle.net/Chirpizard/jyatn89r/

Just click on a blue dot to see what's happening.

Here is the JS:

$(document).ready(function () {
  $(".node").click(function() {
    if ($(this).hasClass('unlocked')) {
      $("#main-char").appendTo(this).animate( {
        top: "+=50"
      }, 1000, function() {
      });
      $(".node").removeClass("activeNode"); //Removes all instances of activeNode
      $(this).addClass('activeNode') //Adds activeNode class to the node clicked on
    }
    else {
      console.log("Sorry, broken");
    }
  });
});

I've checked several other posts and haven't found the exact solution I'm looking for. Any guidance on how to get to red dot to slowly move to the clicked element would be greatly appreciated!

Thanks

Answer 1

If I got your point ... I don't think you need to appendTo .. just use animate

$(document).ready(function () {

  $(".node").click(function() {

    if ($(this).hasClass('unlocked')) {
      $("#main-char").animate( {
        top: $(this).offset().top -27
      }, 1000, function() {
      });

      $(".node").removeClass("activeNode"); //Removes all instances of activeNode
      $(this).addClass('activeNode') //Adds activeNode class to the node clicked on
    }
    else {
      console.log("Sorry, broken");
    }
  });

});

DEMO

Answer 2

Why not remove the appendTo() and calculate the distance instead?

JS:

$(document).ready(function () {

  $(".node").click(function() {

    if ($(this).hasClass('unlocked')) {
      $("#main-char").animate( {
        top: $(this).offset().top -25
      }, 1000, function() {
      });

      $(".node").removeClass("activeNode"); //Removes all instances of activeNode
      $(this).addClass('activeNode') //Adds activeNode class to the node clicked on
    }
    else {
      console.log("Sorry, broken");
    }
  });

});

CODEPEN DEMO

Answer 3

 $(document).ready(function () { $(".node").click(function() { var nodePosition = $(this).position(); $("#main-char").animate( { top: nodePosition.top + 30 }, 1000); }); }); 

 #world-map { background: #222; min-height: 1500px; position: relative; padding: 30px 0 0 0; } #main-char { width: 30px; height: 30px; border-radius: 100%; background: red; margin: 0 auto 0 auto; position: absolute; top: 0; left: 50%; margin-left: -15px; } .node { width: 50px; height: 50px; border-radius: 100%; background: blue; box-sizing: padding-box; margin: 20px auto 0 auto; display: block; } .node1 { top: 100px; } .node2 { top: 400px; } .node3 { top: 700px; } .node4 { top: 1000px; } .node5 { top: 1300px; } .activeNode { background: #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="world-map"> <div id="main-char"></div> <div class="node node1 unlocked"></div> <div class="node node2 unlocked"></div> <div class="node node3 unlocked"></div> <div class="node node4 unlocked"></div> <div class="node node5 unlocked"></div> </div>