Material Design Hierarchical Display Animation with jQuery and CSS3

A jQuery & CSS3 solution to create the famous hierarchical timing display animation as introduced in Material Design's meaningful transitions.

See also:

• Create Material Design Hierarchical Timing Transitions with jQuery and CSS3
• Material Design Hierarchical Timing Animations Using jQuery and CSS3

How to use it:

1. Load jQuery library and the jQuery Hierarchical Display plugin's stylesheet and JS files in the document.

<link href="zmd.hierarchical-display.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.zmd.hierarchical-display.min.js"></script>

2. Adding the data-animation="hierarchical-display" attribute to the parent element will automatically start the hierarchical timing display animation on document ready.

<ul id="demo" 
    data-animation="hierarchical-display">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

3. Pass the parameters to the hierarchical timing animation via data-OPTION attributes.

• data-action="show": Method that should be executed when you call the plugin.
• data-speed="5": Animation speed
• data-animation-in="zoomIn": Animation CSS class that should be added to displaying element when element is showing.
• data-animation-out="zoomOut": Animation CSS class that should be added to displaying element when element is hiding.

4. Public methods.

// initialize the plugin via javascript
$('.el').hierarchicalDisplay(option)

// show a displaying element.
$('.el').hierarchicalDisplay('show'):

// hide a displaying element.
$('.el').hierarchicalDisplay('hide'):

// toggle a displaying element to shown or hidden.
$('.el').hierarchicalDisplay('toggle'):

5. Events.

// fired when a displaying element has been made visible to the user
$('.el').on('shown.zmd.hierarchicalDisplay', function () {
  // do something…
})

// fires immediately when the show instance method is called
$('.el').on('show.zmd.hierarchicalDisplay', function () {
  // do something…
})

// fired when a displaying element has been hidden from the user
$('.el').on('hidden.zmd.hierarchicalDisplay', function () {
  // do something…
})

// fires immediately when the hide instance method is called.
$('.el').on('hide.zmd.hierarchicalDisplay', function () {
  // do something…
})

Change log:

v1.0.1 (2015-08-17)

• make some internal optimizations

---

This awesome jQuery plugin is developed by zavoloklom. For more Advanced Usages, please check the demo page or visit the official website.