Tiny javascript Library - amimation plugin = updated 8th June 2011

When I was pressured to make this 'lil library easily available I was happy to make these pages.

At the same time however, the thing was writen just for me so it is uncommented and not at all disciplined.
I wrote this really rather outlandish method in the (not so) early hours of the morning after a really good night out in the full knowledge that I should have been doing something sensible.
It really is strange, but it works well.
At least I can say it's fully tested over time - it will not fail, it does not cause memory leaks (javascript is good at garbage collection - joke) and it's rather fun! (thats why I still use it). [dont rely on the duration though.]

Insane anachistic Animation plugin.


Science is fun!!!! never take it seriously.

Download Library

Since the tiny library should remain tiny: we should only consider chaining two terms. (any more would require function calls so that soon our lil library would be big!
But we sometimes need to present an effect only after the last effect has completed.
eg: We fade an element from 1 (full opacity), to 0 (invisible), change the colour, and then fade back in to opacity =1.

Since we are (in the most part) unwilling to truely chain beyond 2 terms, we will use a callback function instead. Some of you will be unfamilier with the term callback, but it is simply a function that must be executed when an event has occered (fired).
In our case, we want our callback tho execute once our first task has completed. ie: in our example, once our element has faded out and changed its colour. So where I say "callback" in what follows, you are to understand this is what must happen next.
It's called 'daisy chain' and you may continue daisy chaining till your heart's content.
There is an example on the first page. I will put more here, if you are a bit confused, please don't worry, after a few terms it is a bit!


So here are the usage instructions, by example, of the amimation plugin (included in the download). Laugh if you will, you lend your voice to that of many (it seems) including my own! [But if you are not sure, yes, it will always work.]

I'm a Test Box. My id='a'



Click me!


Form: $('el.id').A("param1, param2,...param n","value1,value2,...value n",period,callback())


params:
op = opacity

$("z").onclick = function() {
	$('a').A('op','0',3000, function() {
			$('a').css('backgroundColor','#0f0');
			$('a').A('op','1',3000)
	});
}


I'm a Test Box. My id='b'


I'm another Test Box. My id='c'


Click me!



	$('b').A('op','0',3000, function() {
		$('b').css('backgroundColor','#0f0');
		$('b').A('op','1',3000, function() {
			$('b').A('op','0',3000, function() {
				$('b').css('backgroundColor','#ff0');
				$('b').A('op','1',2000)
			})
		})
	});
	$('c').A('op','0.2',2000, function() {
		$('c').css('backgroundColor','#ff0');
		$('c').A('op','1',4000, function() {
			$('c').A('op','0',4000, function() {
				$('c').css('backgroundColor','#ffa');
				$('c').A('op','1',2500)
			})
		})
	});
					

I'm a Test Box. My id='d'



				
	params:
	h = height
	w = width
	op = opacity
	 
	** note no particular ordering of param-value pairs is needed.
	*** radius not included in std library.
			
$('d').A('borderRadius,width,height,op','5,500,300,0',5000, function() {
	$('d').A('height,width,op,borderRadius','200,200,1,80',5000)
				});