width : get/set

$('id').w();

Click me

code: alert( $('cow').w());
my id="cow"

Click me

code: $('cows').w('240');
my id="cows"


height : get/set

$('id').h();

Click me

code: alert( $('coh').h());
my id="coh"

Click me

code: $('cohs').h('100');
my id="cohs"


style: css : get/set

$('id').css(param);

Click me

code: alert( $('cocg').css('width'));
my id="cocg"

Click me

code: $('cogs').css('width','100px');
my id="cogs"


style: s : get/set

$('id').s(param);

Click me

code: alert( $('cosg').s('width'));
my id="cosg"

Click me

code: $('sogs').s('width','100');
my id="sogs"


colour: col : get/set

$('id').col(compound param);

'get' will return 'undefined' until we have 'set' it. - so set it first.

We can put a 'D' in to strip it (get2). All this strangeness

is to do with cross browser support and the functioning

of the 'animate colour' (.Ac) method.

Click me

code:

$('cols').col('backgroundColor,#f00');




Click me

code:

alert( $('cols').col('backgroundColor'));




Click me

code:

alert( $('cols').col('backgroundColor,D'));

my id="cols"

NB. 'backgroundColor,#f00' - compound statement.




Animate colour: Ac : get/set

[ also 'rad' is used.]

$('id').Ac(param, compound colours, duration, callback function);

This trick is a little difficult to pull, so it's a compromise.

We get pretty close to the specified colour, but it all depends

where we started from.

If you need the exact colour, you can always call the 'col' method afterwards.

I have printed the actual colour achieved in the box.

Click me

code:

$('ctt').Ac('backgroundColor','10,10,255',2000);


Click me

code:

$('ctt').Ac('backgroundColor','200,10,25',4000,
function(){ $('ctt).rad('0')});


Click me

code:

$('ctt').col('backgroundColor','200,200,0',3000,
function(){ $('ctt).rad('20')});

my id="ctt"

Naturally, any parameter of type colour can be animated.





Animate anything: A : get/set

$('id').A(compound param, compound args, duration, callback function);

You can animate one or many parameters at once.

You can chain as many animations as you wish.

Click me

code:

$('att').A('height','150',2000);


Click me

code:

$('att').A('marginLeft,width,height','15,60,40',
4000,function(){ $('att).rad('0')});


Click me

code:

$('att').A('borderRadius,height,marginLeft,
marginTop','30,90,200,200',3000,
function(){ $('att).rad('20')});



my id="att"




more examples of animate