animation Object|Boolean

A collection of visual animations used when PanelBar items are expand or collapsed through user interactions. Setting this option to false will disable all animations.

animation:true is not a valid configuration.

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
            // fade-out closing items over 1000 milliseconds
            collapse: {
                duration: 1000,
                effects: "fadeOut"
            },
           // fade-in and expand opening items over 500 milliseconds
           expand: {
               duration: 500,
               effects: "expandVertical fadeIn"
           }
       }
    });
</script>

animation.collapse Object

The visual animation(s) that will be used when PanelBar items are closed.

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
            collapse: {
                duration: 200,
                effects: "fadeOut"
            }
        }
    });
</script>

animation.collapse.duration Number(default: 200)

The number of milliseconds used for the visual animation when a PanelBar item is closed.

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
           collapse: {
                duration: 1000
           }
      }
    });
</script>

animation.collapse.effects String

A whitespace-delimited string of animation effects that are utilized when a PanelBar item is closed. Options include "fadeOut".

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
            collapse: {
                duration: 1000,
                effects: "fadeOut"
            }
        }
    });
</script>

animation.expand Object

The visual animation(s) that will be used when opening items.

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
            expand: {
                duration: 200,
                effects: "expandVertical"
            }
        }
    });
</script>

animation.expand.duration Number(default: 200)

The number of milliseconds used for the visual animation when an item is opened.

Example

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
     animation: {
          expand: {
              duration: 1000
          }
       }
    });
</script>

animation.expand.effects String(default: "expandVertical")

A whitespace-delimited string of animation effects that are used when an item is expanded. Options include "expandVertical" and "fadeIn".

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar({
        animation: {
            expand: {
                effects: "expandVertical"
            }
        }
    });
</script>