jQuery animations can be actually combined with CSS transformations to get brilliant and cool effects on web documents. At the time of this writing, the only browsers that support what I'm going to show you in this post are Safari and Chrome, but I guess things will be normalized in a not too distant future. Basically, we're going to apply the browser-specific flavors of the CSS3 property transform to a jQuery animation created with the traditional animate() method. The CSS transformation presented here is a negative rotation of 10 degrees. Here's the code:
$(document).ready(function() {
$('#run').click(function(e) {
var transforms = {
mozTransform: 'rotate(-10deg)',
webkitTransform: 'rotate(-10deg)',
oTransform: 'rotate(-10deg)'
};
$('#test').animate(
{
width: '160px',
height: '160px',
},
'slow', function() {$(this).css(transforms);});
e.preventDefault();
});
});
The CSS extensions are written using the traditional JavaScript notation used for all other style properties. The transformation actually takes place at the end of the animation, so we got a stable effect in the end.