#
March 14, 2013 at 6:38 pm

Hi @marianico2!

This took a bit of work but here is some basic code to get what you need… please read through the comments in the code – [demo here](http://codepen.io/Mottie/pen/GDmCk)

var stops = 5, // number of stops around the circle

delay = 1000, // time to pause in milliseconds

animationDelay = 10, // animation time between steps

step = 0.05, // in radians

img = $(‘.rotate’), // target images

r = 100, // radius

xcenter = 100, // x offset

ycenter = 100, // y offset

// *** don’t change variables below ***

last,

d = 0,

t = 0,

i = 1,

angledStops = 360/stops,

RadToDeg = 180 / Math.PI,

stop = angledStops;

// this evenly spaces out all images with the class rotate around the circle

function setup() {

// 270 degrees is actually the top of the circle

var start = 270 * Math.PI/180,

spacing = 2 * Math.PI / img.length;

img.each(function () {

$(this)

.data(‘pos’, start) // save the position of each image

.css({

top: Math.floor(ycenter + (r * Math.sin(start))),

left: Math.floor(xcenter + (r * Math.cos(start)))

});

start += spacing;

});

}

function moveit() {

t += step;

last = d;

d = Math.round(t * RadToDeg) % 360;

$.when(

img.each(function () {

var $t = $(this),

pos = $t.data(‘pos’) + step;

$t

.data(‘pos’, pos)

.animate({

top: Math.floor(ycenter + (r * Math.sin(pos))),

left: Math.floor(xcenter + (r * Math.cos(pos)))

}, animationDelay);

})).then(function () {

if (d > stop || d < last) {

i++;

if (i > stops || d < angledStops) {

stop = angledStops;

i = 1;

} else {

stop = angledStops * i;

}

setTimeout(moveit, delay);

} else {

moveit();

}

});

}

$(document).ready(function () {

setup();

moveit();

});