动画 <div> 到另一个 <div> 的移动

Question

我正在尝试学习 jQuery，并且正在修改一个小项目以尝试通过实践来学习，但我一直坚持如何为一个 div 到另一个 div 的移动设置动画。

为了澄清，当我点击一个 div 时，我希望另一个 div 移动到我点击的 div。我正在使用 appendTo() 将他移动到那里，但正如你已经知道的那样，移动是即时的，我想为移动设置动画。

这是当前正在发生的事情的一个小提琴：https://jsfiddle.net/Chirpizard/jyatn89r/

只需单击一个蓝点即可查看发生了什么。

这里是 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");
    }
  });
});

我检查了其他几篇帖子，但没有找到我正在寻找的确切解决方案。任何有关如何到达红点以缓慢移动到单击的元素的指导将不胜感激！

谢谢

Answer 1

如果我明白你的意思......我认为你不需要 appendTo .. 只需使用动画

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

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

Answer 3

为什么不删除appendTo() 并改为计算距离？

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