动画的动作 <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

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

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

为什么不删除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

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>