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

Animating hierarchical tree branches with the animate option - JavaScript

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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

As I mentioned in the section that you just read, the "TreeView" plug-in includes an interesting option called "animate" that allows you to apply an animation effect to all of the branches of a given tree, when they're either expanded or collapsed. Actually, understanding how this option works is a simple process, but to clarify any possible doubts that you might have, below I coded a brand new example that demonstrates its usage. Here it is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on jQuery TreeView (using fast animated option)</title>

<link rel="stylesheet" href="jquery.treeview.css" type="text/css" />

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.treeview.js"></script>

<script>

// build treeview after web page has been loaded

$(document).ready(function(){

$("#menu").treeview({

animated: "fast"

});

});

</script>

</head>

<body>

<ul id="menu">

<li class="closed">Link 1

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 2

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 3

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li>Link 4

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

<li class="closed">Link 5

<ul>

<li>Sub link 1</li>

<li>Sub link 2</li>

<li>Sub link 3</li>

<li>Sub link 4</li>

<li>Sub link 5</li>

</ul>

</li>

</ul>

</body>

</html>

 

That's not rocket science, right? As you can see above, now the hierarchical tree has been assigned the parameter "animated: fast," meaning that each time a specific branch is closed or opened in turn, it'll be done by means of a quick scrolling effect. Of course, the best way to understand how the animation argument functions is by trying out the previous example on your own web server, so go ahead and do it. You'll be amazed at how sweetly it works, trust me. 

Now that you've hopefully learned how to apply a fast animation effect to a sample hierarchical tree, it's time to see how a slow effect can be used instead. The full details for how this task will be performed will be discussed in the upcoming section. Therefore, please click on the below link and read the next few lines. 



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- 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: