Solved

Animation jQuery with Ajax

Posted on 2014-10-01
15
314 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 51

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 51

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 51

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 51

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 51

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

747 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

11 Experts available now in Live!

Get 1:1 Help Now