
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.