JQuery plugin to make an element orbit different?

Question

REVISED: Are there any jQuery plugins that can rotate one element around another?

EDIT: By "circular motion" is meant a rotation at the same z-index around another element.

Answer 1

Below is a simple jQuery plugin that I developed to provide the “orbital” functionality you requested. See this script for an example of how to use it.

( function ( $ ) { jQuery.fn.orbit = function(s, options){ var settings = { orbits: 1 // Number of times to go round the orbit eg 0.5 = half an orbit ,period: 3000 // Number of milliseconds to complete one orbit. ,maxfps: 25 // Maximum number of frames per second. Too small gives "flicker", too large uses lots of CPU power ,clockwise: true // Direction of rotation. }; $.extend(settings, options); // Merge the supplied options with the default settings. return(this.each(function(){ var p = $(this); /* First obtain the respective positions */ var p_top = p.css('top' ), p_left = p.css('left'), s_top = s.css('top' ), s_left = s.css('left'); /* Then get the positions of the centres of the objects */ var p_x = parseInt(p_top ) + p.height()/2, p_y = parseInt(p_left) + p.width ()/2, s_x = parseInt(s_top ) + s.height()/2, s_y = parseInt(s_left) + s.width ()/2; /* Find the Adjacent and Opposite sides of the right-angled triangle */ var a = s_x - p_x, o = s_y - p_y; /* Calculate the hypotenuse (radius) and the angle separating the objects */ var r = Math.sqrt(a*a + o*o); var theta = Math.acos(a / r); /* Calculate the number of iterations to call setTimeout(), the delay and the "delta" angle to add/subtract */ var niters = Math.ceil(Math.min(4 * r, settings.period, 0.001 * settings.period * settings.maxfps)); var delta = 2*Math.PI / niters; var delay = settings.period / niters; if (! settings.clockwise) {delta = -delta;} niters *= settings.orbits; /* create the "timeout_loop function to do the work */ var timeout_loop = function(s, r, theta, delta, iter, niters, delay, settings){ setTimeout(function(){ /* Calculate the new position for the orbiting element */ var w = theta + iter * delta; var a = r * Math.cos(w); var o = r * Math.sin(w); var x = parseInt(s.css('left')) + (s.height()/2) - a; var y = parseInt(s.css('top' )) + (s.width ()/2) - o; /* Set the CSS properties "top" and "left" to move the object to its new position */ p.css({top: (y - p.height()/2), left: (x - p.width ()/2)}); /* Call the timeout_loop function if we have not yet done all the iterations */ if (iter < (niters - 1)) timeout_loop(s, r, theta, delta, iter+1, niters, delay, settings); }, delay); }; /* Call the timeout_loop function */ timeout_loop(s, r, theta, delta, 0, niters, delay, settings); })); } }) (jQuery); $('#mercury').orbit($('#sun' ), {orbits: 8, period: 2000}); $('#venus' ).orbit($('#sun' ), {orbits: 4, period: 4000}); $('#earth' ).orbit($('#sun' ), {orbits: 2, period: 8000}).css({backgroundColor: '#ccffcc'}); $('#moon' ).orbit($('#earth'), {orbits: 32, period: 500, maxfps: 20, clockwise: false}); $('#mars' ).orbit($('#sun' ), {orbits: 1, period: 16000}); 

HTML for this example:

 <h1> The inner planets of the Solar System</h1> <div id='solar_system'> <div id='sun' >SUN</div> <div id='mercury'>m</div> <div id='venus' >v</div> <div id='earth' >e</div> <div id='moon' >m</div> <div id='mars' >m</div> </div> 

CSS for this example:

 #solar_system {position: relative; width: 1600px; height: 1600px; background-color: #222222} #sun {position: absolute; width: 80px; height: 80px; top: 380px; left: 580px; background-color: #ffff00; -moz-border-radius: 40px; border-radius: 40px; text-align: center; line-height: 80px; } #mercury {position: absolute; width: 18px; height: 18px; top: 335px; left: 535px; background-color: #ffaaaa; -moz-border-radius: 9px; border-radius: 9px; text-align: center; line-height: 18px; } #venus {position: absolute; width: 36px; height: 36px; top: 300px; left: 500px; background-color: #aaaaff; -moz-border-radius: 18px; border-radius: 18px; text-align: center; line-height: 30px; } #earth {position: absolute; width: 30px; height: 30px; top: 200px; left: 400px; background-color: #ffaaaa; -moz-border-radius: 15px; border-radius: 15px; text-align: center; line-height: 30px; } #moon {position: absolute; width: 12px; height: 12px; top: 150px; left: 350px; background-color: #cccccc; -moz-border-radius: 6px; border-radius: 6px; text-align: center; line-height: 12px; } #mars {position: absolute; width: 24px; height: 24px; top: 100px; left: 200px; background-color: #ffaaaa; -moz-border-radius: 12px; border-radius: 12px; text-align: center; line-height: 24px; } 

Answer 2

THIS RESPONSE TO BE FOLLOWED BY MY OTHER RESPONSE TO THIS QUESTION.

---

You can use the animate () method to change the properties of the "top" and "left" elements. The following is an example.

HTML:

  <div id='moon' > moon </div> <div id='earth'> earth </div> 

CSS

 #moon {position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-color: #aaaaff;} #earth {position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: #ffaaaa;} 

JavaScript:

  $('#moon').animate({left: 100}, 2000) .animate({top: 100}, 2000) .animate({left: 0}, 2000) .animate({top: 0}, 2000); 

Answer 3

If you want to see something in raw Javascript, I made a demo page many years ago:

Demo

Click the JavaScript Demo button. The page is not compressed or reduced, so JavaScript is very clean.

Answer 4

 rotnew = (Math.asin(a / r) * 180) / Math.PI; if(y < s_x ){ rotnew = - rotnew; } p.css({'transform': 'rotate('+(rotnew)+'deg)'}); 

These three lines (placed inside the cycle) allow each "planet" to remain perpendicular to the center of the orbits, it does nothing if the rotating object is, of course, round: D