Solved

Animation jQuery with Ajax

Posted on 2014-10-01
15
321 Views
Last Modified: 2014-10-02
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.
0
Comment
Question by:Rodric MacOliver
  • 6
  • 5
  • 4
15 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40356356
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
 

Author Comment

by:Rodric MacOliver
ID: 40356383
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
 

Author Comment

by:Rodric MacOliver
ID: 40356384
Also Alexandre Simões, I need the animation to start only when the circle is clicked...
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40356389
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
 

Author Comment

by:Rodric MacOliver
ID: 40356400
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40356406
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40356410
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Rodric MacOliver
ID: 40356416
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40356419
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 250 total points
ID: 40356430
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
 

Author Comment

by:Rodric MacOliver
ID: 40356434
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
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 40356438
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
 

Author Comment

by:Rodric MacOliver
ID: 40356454
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40356456
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40356478
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Close "X" button on window popup in Firefox 7 37
how can display objects ? 3 24
JS Plugin Chaining 2 32
Elegant Way to Include Query String When it exists? 4 43
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now