SUMMARY

jQuery Effects And Animations

There are nine (9) jQuery Effect methods broken up in three groups of three methods each:

  1. show() – will make an object visible IF it is not already shown on the page; otherwise nothing happens.
  2. hide() – will make an object invisible IF it is not already hidden on the page; otherwise nothing happens.
  3. toggle() – is the best of both worlds of the show() and hide() methods, in that it will TOGGLE the visibility based on the CURRENT visibility of an object on the page.
  1. fadeIn() – will make an object fade In IF it is not already shown on the page; otherwise nothing happens.
  2. fadeOut() – will make an object fade Out IF it is not already shown on the page; otherwise nothing happens.
  3. fadeToggle() – is the best of both worlds of the fadeIn() and fadeOut() methods, in that it will TOGGLE the fade based on the CURRENT visibility of an object on the page.
  1. slideUp() – will make an object slide Up IF it is not already shown on the page; otherwise nothing happens.
  2. slideDown() – will make an object slide Down IF it is not already shown on the page; otherwise nothing happens.
  3. slideToggle() – is the best of both worlds of the fadeIn() and fadeOut() methods, in that it will TOGGLE the slide based on the CURRENT visibility of an object on the page.

    TIP: To avoid the mistake of writing "toggleFade" or "toggleSlide" instead of "fadeToggle" and "slideToggle" think of "Toggle with a capital "T" in the middle of the methods (fadeToggle, slideToggle).

There is only one (1) jQuery Animation method. However, there are a host of parameters that can be added:

  1. animate() – will animate an object using CSS properties name/value pairs.