Most web developers think that jQuery animations work only thanks to the animate() method. Although this is true to some extent, it's worth saying that jQuery animations couldn't take place without the fundamental aid of CSS properties. CSS properties, in fact, help jQuery to animate HTML elements in several different ways.
For example, width and height are useful when creating horizontal and vertical sliding effects, respectively. Example:
$('#test').animate({width: '0px'}, 'slow');
$('#test').animate({height: '0px'}, 'slow');
In the above code, the width and height of a given element have been reduced to 0. This is exactly the same visual effect of the slideUp() and slideDown() methods. The effect mentioned earlier is progressive, in the sense that the animate() method progressively subtracts pixels from the overall width or height of an element until it reaches 0, and then stops.
Other useful CSS properties are those related to floating, overflow and positioning. The float property often works together with overflow, especially when you have to create an horizontal slider. First, you specify on the parent element a width that equals only the width of the first child in a series. Then, with the overflow property, you actually hide the other child elements that will be later revealed by a subsequent jQuery action.
Also positioning properties are important. For example, to create the effect of an horizontal movement, you can declare position: relative on the target element and then, using the animate() method, change its horizontal offset by using either the left or right property. Of course you can add even more effects by using other CSS properties as well.