jQuery Effects

The effects used in jQuery are probably the cool effects that you have seen on others’ websites. They are extremely powerful and actually require a sizable amount of JavaScript if you were to write it without using the jQuery effects. It is important to understand how these effects work so that you have a greater knowledge of JavaScript. Often, we find ourselves looking for the easy solution, but in fact, it is usually the hard way that teaches us the lessons and concepts that we should know.

If you saw the example in the events, our example will look very familiar.


Pretty awesome, huh? We are using the different ids of the buttons to run the jQuery function that we want. We use two effects here, hide and show to change the visibility of the first <li> in our <ul> with an id of someList. Obviously, the hide effect is the one that makes the element invisible, and the show effect makes the element visible.

More Common Effects

  • animate() – changes a set of CSS properties with the option to animate the changes.
  • fadeIn() – animates the element from hidden to visible
  • fadeOut() – animates the element from visible to hidden
  • slideDown() – animates the change of the elements height from hidden to visible
  • slideUp() – animates the change of the elements height from visible to hidden
  • toggle() – alternatives between show and hide effects

One quick note here. We could have only used one button in the example above if we used toggle instead of hide and show. Remember, effects are your friend. Also, don’t forget to use jQuery’s official reference guide at jQuery Effects.

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Share on StumbleUpon
Digg this
Tweet about this on Twitter
Share on Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.