JQuery is a Javascript library that can be used to extend websites in all kinds of new and interesting ways. It features a huge database of scripts that people have written that take the form of website plugins, script extensions, cross-browser support for certain items, and so much more. Another function that jQuery can be used for is to add animation and video support to websites, since Javascript normally doesn’t handle that kind of thing on its own.
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?
To put it generally, effects are added animations that can be inserted into websites. This can be anything from a progress bar that fills while a page loads, or an entire flash animation cartoon. Because animations are not available through standard Javascript programming, putting any animations onto a website requires an understanding of jQuery. The jQuery library has access to tons of different animation styles and types available, such as fades, delays, queries, slides, stops, toggles, and many more.
Show and hide content
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
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.
Manage animation effects
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.
