CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Chirpizard
Chirpizard

Reputation: 291

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

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

Upvotes: 4

Views: 6171

Answers (3)

Peter Girnus
Peter Girnus

Reputation: 2739

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

Upvotes: 0

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

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

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 6

Related Questions