The .animate() method allows animation of CSS properties. It takes a properties object defining the CSS properties and values to animate to, along with a speed and optional easing and callback functions. Properties can include individual values like opacity or groups to toggle between like height. The properties are animated from their starting to ending values over the specified duration.

1. Effect - Animation
.animate()

2. manual
.animate()

3. Parameters:
Properties, speed, easing, function)
.animate({
property1 : 'value1',
propertyN : 'valueN'
}, speed, easing, function(){
alert('Animation animated.');
});

4. .animate({
Options)
Parameters: Properties,
property1: 'value1',
propertyN: 'valueN'
}, {
duration: 'value',
easing: 'value',
complete: function(){
alert('Animation animated.');
},
queue: boolean,
step: callback
});

5. toggle
effect
animate()
.animate({opacity:'toggle'}, 'slow');

6. Property
property
animate()
.animate({
opacity:'toggle',
height:'toggle'
}, 'slow');

7. Property
css()
animate()

8. CSS
element
element
css
animate()
CSS
element
position: relative;