javascript - 动画化一个 <div> 到另一个 <div> 的移动

Question

我正在尝试学习 jQuery 并正在修补一个小元素以尝试通过实践来学习，但我一直在研究如何为一个 div 到另一个 div 的移动设置动画。

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

这是当前正在发生的事情的 fiddle :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 .. 只需使用 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