This article is another in a series of articles on jQuery which are meant to show the really impressive variety and array of ways that it can be used; we’ll discuss effects in jQuery. As I mentioned a moment ago, jQuery allows users to add animation and other effects to websites. This article is going to go a little more in depth into how jQuery can be used to insert a huge variety of effects into your projects.
What are effects?
One of the most basic animation types is the ability to show and hide content – think of the spoiler tag on a forum, which can collapse or expand portions of text. The basic commands for these functions are .show() and .hide(), which is simple enough. When an object is hidden, its CSS display property is set to none, which means that it will have zero width and zero height. The show and hide functions can also be attached to other animations, such as fades or collapses.
Animations are the next obvious step after learning about showing and hiding content. Animations let you perform all kinds of effects like fading, cross-fading, sliding, and many others. In fact, you can use animations like .slideDown() and .slideUp() in order to combine with the hide and show animations in order to shift an element’s height up or down with a sliding effect rather than just immediately collapsing. The example above has a banner which you can slide the header left or right.
Display changes based on the state current visibility
jQuery’s scripts can also allow you to do things like change the screen’s visibility based on it’s current state of visibility. This works from the .toggle() command, which changes what is currently visible between two predefined variables.
What to do after animation completes
A pretty common mistake that people make when using jQuery animations is to assume that processes will wait for an animation to complete before they run. This is, however, not the case. Deferring action until after an animation has completed, requires the use of an animation callback function, which specifies the second argument you need in order to complete the sequence without the animation running over the next process in line to execute.
In addition to offering a lot of options for various types of animations, jQuery also features a number of additional features for managing and controlling them. The .stop() command immediately terminates animations. The .delay() command inserts a delay between animations that follow one another. Other commands can change how quickly effects are implemented or how many frames per second an animation runs at.
These are just a few of the ways that jQuery animations can be used to design a great-looking website.