title: Animating the movement of a <div> to another <div>
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Here is a fiddle of what is happening currently: <a href="https://jsfiddle.net/Chirpizard/jyatn89r/" rel="nofollow">https://jsfiddle.net/Chirpizard/jyatn89r/</a></p>
  
  <p>Just click on a blue dot to see what's happening.</p>
  
  <p>Here is the JS:</p>
  
  <pre><code>$(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");
      }
    });
  });
  </code></pre>
  
  <p>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!</p>
  
  <p>Thanks</p>