Using the Animate Option in a Treeview jQuery Hierarchical Navigation System

If you're planning to develop a web site or an application that provides users with the ability to move across different sections of it with a hierarchical navigation system, then you might want to take a look at the TreeView jQuery plug-in. This JavaScript library will let you build a system like this in a truly unobtrusive fashion, utilizing only a few nested HTML lists.

Naturally, if you already had the opportunity to read the two preceding articles of the series, then you've become familiar with using the plug-in for building some simple hierarchical trees whose branches can be completely customized. In the course of those tutorials I explained how to use the "closed" CSS class along with the "collapsed" option provided by "TreeView" to specify which branches of a sample tree should be displayed expanded, and which ones should be shown closed. This characteristic is useful for controlling the default behavior of a tree's branches, but it's not the only capability offered by the plug-in. 

In reality, "TreeView" comes bundled with another option called "animate" that allows you to apply appealing animation effects to the branches when they are opened and closed. Obviously, this feature will make a selected hierarchical tree look much more professional and attractive, so in the next few lines I'm going to discuss how to use it in the context of some illustrative examples. 

Are you ready to learn how to create neat animation effects in hierarchical navigation systems? Then start reading now!