jQuery Tree

Set the animationShowDuration property of the jqxTree. Author: http://jqwidgets.com

by hugosolar

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href=" http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id='jqxTree'>
    <ul>
        <li item-selected='true'>Home</li>
        <li item-expanded='true'>Solutions
            <ul>
                <li> <i class="material-icons">build</i> Tengo un Ă­cono</li>
                <li>Financial services</li>
                <li>Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                        <li>Rich Internet applications</li>
                        <li>Technical communication</li>
                        <li>Training and eLearning</li>
                        <li>Web conferencing</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>

CSS

.jqx-tree-nubox {
  border-color: red;
}
.jqx-tree-nubox .jqx-tree-item-li {
  border-bottom: 1px solid #C0C0C0;
}
.jqx-tree-nubox .jqx-tree-item-li .material-icons {
  font-size: 11px;
  color: navy;
}

JavaScript

$('#jqxTree').jqxTree({
       height: '300px',
       width: '300px',
       theme: 'energyblue',
       animationShowDuration:1000,
       theme: 'nubox'
   });