Home arrow JavaScript arrow Using the Animate Option in a Treeview jQuery Hierarchical Navigation System

Using the Animate Option in a Treeview jQuery Hierarchical Navigation System

Welcome to the third chapter of a series on creating a hierarchical navigation system with the TreeView jQuery plug-in. Made up of six tutorials, this series explores in detail the main features that come packaged with this helpful JavaScript extension. It shows you how to get the most out of it with copious code samples.

  1. Using the Animate Option in a Treeview jQuery Hierarchical Navigation System
  2. A review of the collapsed option
  3. Animating hierarchical tree branches with the animate option
  4. Creating a slow animation effect
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
May 04, 2009

print this article



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! 

>>> More JavaScript Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: