Below are some basic animations in jQuery. Details are yet to come.

1- animate();

You can use animate() function to perform some parallel animations. The animations indicated in the function will be performed simultaneously within the defined duration. You can also provide a callback function as a parameter to animate() function. See below for a simple example.


$('#myId').animate({
opacity:0.50,
right:'+=100',
height: 'toggle'
},3500, function(){
//contents of callback function
});


2- toggle();

a-)

When no parameters supplied, toggle() function simply toggles the visibility of elements.

$('.myClass').toggle(); -> toggles the visibility of elements that has “myClass” css class.

b-)

toggle([duration],[callback function]);

duration: Duration value can be set to “slow”, “fast”, “normal” or to a numeric value for milliseconds.

callback function: Executed after the completion of toggle() animation. Callback functions are applied for almost all of the other animation functions in jQuery.


$('.myClass').toggle('fast', function(){

//callback function contents

});

3- slideDown();

a-)

slideDown() can be called with no parameters just to animate the height of the matched elements.

$('#myDiv').slideDown('slow');

b-)

slideDown() can be called with a callback function to handle the completion of the animation.


$('#myDiv').slideDown('slow',function(){

//contents of the callback function

});

4- slideUp();

a-)

slideUp() can be called with no parameters just to animate the height of the matched elements.

$('#myDiv').slideUp('slow');

b-)

slideUp() can be called with a callback function to handle the completion of the animation.


$('#myDiv').slideUp('fast',function(){

//contents of the callback function

});

to be continued…

Good Luck,
Serdar.