In this post I'm going to show you how to implement a set of basic animations using CSS floats and the animate() method of the jQuery library. Let's say that we have a series a boxes inside a container. The normal flow of the documents lay them out as normal blocks, one on the top of the other.
The secret here is not using the float property directly inside the animate() object, but rather in the callback function attached to it, like so:
$(document).ready(function() {
$('#animate').click(function(e) {
$('#container div').each(function() {
$(this).animate({
width: '100px',
height: '100px',
lineHeight: '100px',
margin: '0 1em 0 0'
}, 'slow', function() {$(this).css('float', 'left');});
});
e.preventDefault();
});
});
If you use floating inside the style properties of the animate() method, you will get unexpected result. You can see this demo here.