kAnim plugin for jQuery

The kAnim plugin for jQuery is designed to give a more organic feeling to the animation of multiple elements. Instead of the elements being animated simultaneously, as with animate(), or in succession, kAnim animates successive elements in overlapping intervals.

It can be downloaded here: http://www.digitalbutter.com/static/js/jquery.kAnim.js

Usage Standard Presets

$(selector).kAnim( animationParameters, duration, order, callback, overlap )

kAnim takes up to 5 arguments. All arguments are optional except the first.

animationParameters

The parameters supplied function identically to those in the jQuery animate function in dealing with css properties.

Names of built-in presets can also be entered as a string the first argument. Those presets are:
appear
disappear
horizontalAppear
horizontalDisappear
horizontalSlideIn
horizontalSlideOut
verticalAppear
verticalDisappear
verticalSlideIn
verticalSlideOut

duration

The target total time of animation in milliseconds

order

The order by which the selected elements will be sequentially animated. The three options are: "normal","random","reverse". Normal order is ascending order. Random is random. Reverse is descending order.

callback

A function to run when the animation completes.

overlap

The amount of temporal overlap between each object and its successor. If the duration is 1000ms and there are 10 elements being sequenced, the frequency for each object without overlapping would be every 100ms. If the overlap is set to .9, each elements animation will be overlapped by its successor by 90%, meaning that 10% of the way through the first animation, the next will start, and so on. The default overlap value is .5, and the range of numbers allowed is 0.0-1.0.

Example 1

appear preset

$(selector).kAnim("appear");

Example 2

.kAnim("horizontalAppear") with a 3000 ms duration

$(selector).kAnim("horizontalAppear",3000);

Example 3

(left to right) .kAnim("verticalAppear") and .kAnim("verticalSlideIn()")

$(selector).kAnim("verticalAppear"); 
and $(selector).kAnim("verticalSlideIn")

Example 4

.kAnim("dissappear") in random order, then .kAnim("appear") slightly faster on the callback

$(selector).kAnim("disappear",1000,"random",function(){
	$(this).kAnim("appear",600,"reverse");
});

Example 5

.kAnim("dissappear") in random order with a .1 overlap, then .kAnim("appear") with an overlap of .9

$(selector).kAnim("disappear",2000,"reverse",function(){
		$(this).kAnim("appear",2000,"normal",null,.9);
	},.1);
});

Example 6

Lots of the presets chained, with various settings

						
$(selector).kAnim("horizontalDisappear",2000,"reverse",function(){
	$(this).kAnim("appear",2000,"random",function(){
		$(this).kAnim("verticalSlideOut",2000,"reverse",function(){
			$(this).kAnim("horizontalSlideIn",2000);
		},.05);
	});
});

Since kAnim takes arguments similar to jQuery's animate() function, only a quick example is necessary.

This example resizes the height and width of the selected elements. The width animates to 100px, the height to 100px over a duration of 2000 ms. It iterates through the array of elements in "normal" (ie ascending) order. The callback function alerts "done!", and the relative temporal overlap of the elements is .7, or 70%.

							
$(selector).kAnim({"width":"100px","height":"100px"},2000,"normal",function(){
	alert("done!");
},.7);