I had the occasion come up recently where i needed to animate something in a circle. It never occurred to me until then that there wasn’t an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it.

The Empowering Concepts

This is a jQuery plugin, so obviously it relies upon the jQuery library. Specifically, jQuery 1.4 or later, because we are using the .animate() functions new ability to have per property easing. This means we can animate the “top” value with one easing function while animating the “left” value with a different easing function. All this talk of easing… I should say that not only does this require jQuery 1.4+, it also requires the easing plugin.

Here is the idea:

So if we do that four different times, flipping around the easing functions and adding/subtracting as necessary, we can get a circle. And not just a circle really, but any ellipse defined by height and width.

Features

You can declare speed, height, and width. Those are pretty obvious / standard / expected parameters for a plugin like this. There are three others though:

• sizeAdjustment: a percentage adjustment. Default is 100 (stays the same). Lower than 100 = shrinks to that percentage at the half-way point and then back up. Higher than 100 = grows to that percentage at the half-way point and then back down.
• loop: Default is false. True means the loop will run recursively. You can stop a current loop by calling the plugin on that element with just a single string parameter: $(“#thing”).circulate(“stop”);
• zIndexValue: accepts an array of four numeric values. These values set the z-index CSS property at each of the four points of the animation.

Here is the full set:

$("#anything).circulate({

    speed: 400,                  // Speed of each quarter segment of animation, 1000 = 1 second
    height: 200,                 // Distance vertically to travel
    width: 200,                  // Distance horizontally to travel
    sizeAdjustment: 100,         // Percentage to grow or shrink
    loop: false,                 // Circulate continuously
    zIndexValues: [1, 1, 1, 1],  // Sets z-index value at each stop of animation

});

BETA

As-is, I’m going to call this a Beta release. Mostly because it doesn’t work very well in Opera. If anyone is a big Opera fan and cares to figure out what is wrong with it, I’m all ears.

It’s also Beta because I haven’t gotten a ton of feedback on it, so I’d like to react to any of that that comes in and make changes as necessary. For example I’m thinking a callback function parameter might be a good idea. Also, I’m sure there are some parts that could be written a bit more efficiently.