This time I will share jQuery Plugin and tutorial about Material Design Hierarchical Display Animation with jQuery and CSS3, hope it will help you in programming stack.
A jQuery & CSS3 solution to create the famous hierarchical timing display animation as introduced in Material Design‘s meaningful transitions.
How to use it:
1. Load jQuery library and the jQuery Hierarchical Display plugin’s stylesheet and JS files in the document.
1 |
<link href="zmd.hierarchical-display.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
3 |
<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.
2 |
data-animation="hierarchical-display"> |
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 speeddata-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.
02 |
$('.el').hierarchicalDisplay(option) |
05 |
$('.el').hierarchicalDisplay('show'): |
08 |
$('.el').hierarchicalDisplay('hide'): |
11 |
$('.el').hierarchicalDisplay('toggle'): |
5. Events.
02 |
$('.el').on('shown.zmd.hierarchicalDisplay', function () { |
07 |
$('.el').on('show.zmd.hierarchicalDisplay', function () { |
12 |
$('.el').on('hidden.zmd.hierarchicalDisplay', function () { |
17 |
$('.el').on('hide.zmd.hierarchicalDisplay', function () { |
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.
