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

Creating a slow animation effect - 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

An adequate epilogue for this article would consist of demonstrating how to apply a slow scrolling effect to the hierarchical three built in the previous section. That's exactly what I'm going to do in the next few lines -- that is, use the "animation" option, but this time assign a "slow" value to it. The code sample that represents this case is listed below. Please, check it out:

 

<!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 slow 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: "slow"

});

});

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

 

Although the above example looks very similar to the one developed in the previous segment, it contains a subtle difference. As I explained a few moments before, now the "animation" argument has been assigned a "slow" value, implying that each time a branch of the tree is expanded or collapsed, it'll do this by scrolling down very slowly. Again, I encourage you to test this example on your own web server, so you can understand more easily how this argument affects the behavior of the tree in question. 

And with this last example, I'm finishing this tutorial on using the "animation" option provided by the "TreeView" jQuery plug-in. As usual, feel free to tweak all of the code samples included in this article to give you more practice working with this powerful JavaScript library. 

Final thoughts 

Over this third chapter of the series, I discussed the use of the "animation" option provided by the "TreeView" plug-in. As you saw, it can be used for creating some visually-appealing effects on the branches of a hierarchical tree when they're being either collapsed or expanded. 

However, there are many other features of the plug-in that deserve a close analysis as well. Therefore, in the forthcoming part I'm going to explain how to restrict the behavior of a tree to expand only one branch at a time, while the others remain closed. So, now that you've been warned about the topics that will be covered in the next article, you simply can't miss it!



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