Animation jQuery with Ajax

Hi folks, I'm not familiar at all with jQuery or Javascript animation so any help would be much appreciated.

What I need is an animation of what looks like a single circle that when clicked looks like 5 other circles "appear" from behind the first circle. The ajax is needed because the amount of circles that appear from behind the first circle depends of a database response.

I want the circles to be equidistant from the first one that should stay put in the middle...

Does anyone knows how to go about doing it other than flash?!?!

Thanks a lot, any help would be much appreciated.
Cheers.
Rodric MacOliverResearcherAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
There are different ways to draw circles on a web page.
The solution I propose here is pure CSS. For what you want you don't need any canvas drawing.

Just be aware that this is not supported by really old browsers: http://caniuse.com/#search=border-radius
If the browser doesn't support it you'll end up with the same effect but with squares :)

Here's a prototype: http://jsfiddle.net/AlexCode/gqv8zwmw/
If this is what you want then I can make the circles generation dynamic.
<div class="circlesContainer">
    <div class="circle circle1"></div>
    <div class="circle circle2"></div>
    <div class="circle circle3"></div>
    <div class="circle circle4"></div>
    <div class="circle circle5"></div>
</div>

Open in new window

.circlesContainer{
    position: relative;
}
.circle{
    position: absolute;
    border: 1px solid #000;
}
.circle1{
    width:50px;
    height: 50px;
    border-radius: 25px;    
}
.circle2{
    width:40px;
    height: 40px;
    border-radius: 20px;
    margin-top: 5px;
    margin-left: 5px;
}
.circle3{
    width:30px;
    height: 30px;
    border-radius: 15px;
    margin-top: 10px;
    margin-left: 10px;
}
.circle4{
    width:20px;
    height: 20px;
    border-radius: 10px;
    margin-top: 15px;
    margin-left: 15px;
}
.circle5{
    width:10px;
    height: 10px;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 20px;
}

Open in new window

0
Rodric MacOliverResearcherAuthor Commented:
Alexandre Simões, its kind of what I need but I need the circles to be the same size so that it looks like its only one circle, or maybe make the other hidden and only start showing them when they start moving...
But this is a good start... Thanks
0
Rodric MacOliverResearcherAuthor Commented:
Also Alexandre Simões, I need the animation to start only when the circle is clicked...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Alexandre SimõesManager / Technology SpecialistCommented:
But if the circles are all of the same size they will be shown as only one as you say.
What kind of animation do you want to do with that?
How do you want the circles to "appear from behind"?... from the center smaller 'till they reach the big circle size?
0
Rodric MacOliverResearcherAuthor Commented:
Yep the center one should have the other five come out from behind when clicked and they must spread around it in a circular formation... Like the sun with stars in orbit...
0
Julian HansenCommented:
If I understand you correctly you want the circles to animate left and right of the starting circle.
How about this
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 40px;
  margin: 0 auto;
  border: 1px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: red;
  left: 230px;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="circle"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var circles = 4; // Set with script
$(function() {
  for(i = 1; i <= circles; i++) {
    addCircle(i);
  }
});
function addCircle(i) {
  var circle = $('<div/>').addClass('circle');
  var distance = Math.ceil(i/2) * 50;

  $('#circle-container').append(circle);
  // Even we go right, Odd we go left
  
  if (i%2) {
    distance = -distance;
  }

  circle.animate({left: "+=" + distance}, 1000);
}
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t715.html
0
Julian HansenCommented:
Modified javascript to handle animation on click
html modification
<div id="circle" class="circle"></div>

Open in new window

Javascript modification
<script type="text/javascript">
var circles = 4; // Set with script
$(function() {
  $('#circle').click(function() {
    for(i = 1; i <= circles; i++) {
      addCircle(i);
    }
  });
});
function addCircle(i) {
  var circle = $('<div/>').addClass('circle');
  var distance = Math.ceil(i/2) * 50;

  $('#circle-container').append(circle);
  // Even we go left, Odd we go right
  
  if (i%2) {
    distance = -distance;
  }

  circle.animate({left: "+=" + distance}, 1000);
}
</script>

Open in new window

0
Rodric MacOliverResearcherAuthor Commented:
julianH the idea is similar but not quite right I need it for the other circles to be spread around in equal distances from the beggining circle, something like they are in perfect orbit around the first one. They must go in different directions and not right and left...
0
Julian HansenCommented:
Here is a version that draws the circle div's and colours them - and the animation works on what is in the markup
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 40px;
  margin: 0 auto;
  border: 1px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: red;
  left: 230px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.orange {
  background: orange;
}
</style>
</head>
<body>
<div id="circle-container">
  <div class="circle blue"></div>
  <div class="circle green"></div>
  <div class="circle yellow"></div>
  <div class="circle orange"></div>
  <div id="circle" class="circle"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var clicked = false;
$(function() {
  $('#circle').click(function() {
    if (clicked) return;
    clicked = true;
    $('#circle-container .circle').each(function(indx, item) {
      var distance = Math.ceil(indx/2) * 50;
      if (indx % 2) {
        distance = -distance;
      }
      $(this).animate({left: "+=" + distance}, 1000);
    });
  });
});
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t716.html
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ok, so what you need is a radial menu kind of thing.

See if this suites you: http://creative-punch.net/2014/02/making-animated-radial-menu-css3-javascript/

There are others but this is the idea right?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rodric MacOliverResearcherAuthor Commented:
Exactly like that Alexandre Simões. That is the idea alright.
Now I need it to be loaded by ajax since the number of circles must be dynamicaly retrieved from a database...
0
Julian HansenCommented:
Ok - just add some trig and we are set
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: red;
  left: 230px;
  top: 230px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.orange {
  background: orange;
}
.pink {
  background: pink;
}
.purple {
  background: purple;
}
</style>
</head>
<body>
<div id="circle-container">
  <div class="circle animate blue"></div>
  <div class="circle animate green"></div>
  <div class="circle animate yellow"></div>
  <div class="circle animate orange"></div>
  <div class="circle animate pink"></div>
  <div class="circle animate purple"></div>
  <div id="circle" class="circle"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var clicked = false;
var distanceToMove = 100;
$(function() {
  $('#circle').click(function() {
    if (clicked) return;
    clicked = true;
    var total_circles = $('#circle-container .circle.animate').length;
    var angle = (Math.PI * 2 / total_circles)
    $('#circle-container .circle.animate').each(function(indx, item) {
      var top = distanceToMove * Math.cos(angle*(indx-1));
      var left = distanceToMove * Math.sin(angle *(indx-1)); 

      $(this).animate({left: "+=" + left, top: "+=" + top}, 1000);
    });
  });
});
</script>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t717.html
0
Rodric MacOliverResearcherAuthor Commented:
julianH, that's just what I need except that I need it to be loaded in ajax since I need the number of circles to come from a database query without reloading the page...
0
Alexandre SimõesManager / Technology SpecialistCommented:
Well, for the link I posted the distribution is dynamic.
You just need to add the number of items you need inside the <div class="circle"> element.
Each <a> represents a circle around.

So, on your ajax success just add elements to that container and the menu will appear correctly.

Just saw that @julianH's example is also dynamic, so you can also use it in the same way.
0
Julian HansenCommented:
The ajax side is trivial. Make the ajax call - return the <div class="circle"> markup and add it to the container.

The only other change is to set the click event to dynamically bind to the centre circle.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.