Hans Martin Hans Martin - 3 months ago 6
jQuery Question

jQuery Animation expanding Divs in Circle

I don't know how to search for this in google or at least here at stackoverflow. Maybe you guys have a word for this animation to search for or something how to call it.

Anyway, my idea is the following. You have a simple div and when you click on it, from the center of the div there should grow 4 other divs which have a little distance to the clicked div and are placed on a half circle. Maybe the image can help your imagination to follow my idea:
enter image description here

Does anyone of you have an idea how to code this?

Edit: Added Code from Comment, while .squadplayerinfo are the spread divs, .playercard the outer div and .field the outer outer div

function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
}

$(document).on("mousemove", ".field", function(e) {
var mX, mY, distance,
$element = $(".playercard");

mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);

if(distance > 100) {
$(".squadplayerinfo").each(function(index) {
(index == 1 || index == 2) ? radius = 100 : radius = 75;

angle = toRadians(360 / $(".squadplayerinfo").length * (index + 0.5) / 2);

$(this).animate({
opacity: 0,
right: "+=" + calcX(angle),
top: "+=" + calcY(angle)
}, 750, function() {
// done animating
});
});
}
});

Answer

I played with the idea for a few minutes and I think this is what you are looking for:

// javascript
var amount = $(".expand").length;
var radius = 200;

$("#trigger").click(function() {
  var x, y, angle;
  $(".expand").each(function(index) {
    angle = toRadians(360 / amount * index);
    x = calcX(angle);
    y = calcY(angle);
    $(this).animate({
      right: "-=" + x,
      top: "-=" + y
    }, 2000, function() {
      // done animating
    });
  });
});

function calcX(angleRadians) {
  return Math.floor(radius * Math.cos(angleRadians));
}

function calcY(angleRadians) {
  return Math.floor(radius * Math.sin(angleRadians));
}

function toRadians(angleDegrees) {
  return angleDegrees * Math.PI / 180;
}
/* css */

.expand {
  position: absolute;
  top: 50%;
  right: 50%;
}
#trigger {
  position: absolute;
  top: 200px;
  right: 200px;
}
<!-- html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>
<div class="expand">a</div>

<button id="trigger">click me</button>

It is dynamically computes the angles based on the amount of divs and the radius can be controlled with ease :)

Hope this helped... Good luck

EDIT

I have noticed you only want your divs to spread on the top half of the screen, so pls change this line:

angle = toRadians(360 / amount * index);

to this one:

angle = toRadians(360 / amount * (index + 0.5) / 2);
Comments