Chaining animations

The .animate() function from jQuery allows you to make a property vary through time from the current value to a new one. A typical effect, for example, would be to move it left from 10 pixels, or change its height. From what you've seen earlier and experienced for other type of functions, you may expect the following code to make  a div (DOM division element) move diagonally to the position left = 200px and top = 200px.
$("#myElementId").animate({top: 200}).animate({left: 200}); However, it doesn't! What you will see instead is the div first moves to reach top = 200px and only then moves to left = 200px. This is called queuing; each call to animate will be queued to the previous ones and will only execute once they're all finished. If you want to have two movements executed at the same time, thereby generating a diagonal movement, you'll have to use only one call to .animate().
$("#myElementId").animate({top: 200,left: 200}); Another possibility is to explicitly tell the .animate() function not to queue  the animations:
$("#myElementId").animate({top: 200}).animate({left: 200},{queue: false}); Keep in mind that this also applies to other functions that are in fact wrappers around the .animate() function, such as the following: • fadeIn(), fadeOut(), and fadeTo() • hide() and show() • slideUp() and slideDown