Here is an example:
In each of the examples below the number passed to the functions will control the speed of the transition. Lower numbers make the transition faster and a value of 0 will make it instantaneous. For example:
// a very quick transition $('h2').slideIn(100); // a very slow transition $('h2').slideIn(1000);
Let's see how this works:
The slideToggle() method alters the height of the selected element(s) to provide a show / hide animation. The fist call to this method will hide the selected element, the second will display it. This method uses a combination of two other methods, slideDown() and slideUp() each of which respectively hide and show the selected element in the same manner.
Some other jQuery effects inlclude:
The toggle() method is similar to slideToggle() except that it alters both the width and height of the selected element(s).
The fadeToggle() method is similar to slideToggle() and toggle() except that, rather than altering the size of the selected elements, it alters the opacity. This provides a smooth fade in and out animation.
These are only basic examples of what is possible with jQuery effects and transitions. Much more complex and impressive effects can be created with methods such as animate() and delay(). Using callback functions can also add another layer of interactivity as this allows animations to be chained together and executed in sequence.
Now open the jQuery effects and transitions exercise page and work through it.