New to Kendo UI for jQuery? Start a free 30-day trial

Animation.open

configuration

The visual animation(s) that will be used when the new tab is shown.

animation.open

Object

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                duration: 200,
                effects: "expand:vertical"
            }
        }
    });
</script>

animation.open.duration

Number

The number of milliseconds used for the visual animation when a new tab is shown.

Default: 200

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
       animation: {
          open: {
              duration: 1000
          }
       }
    });
</script>

animation.open.effects

String

A whitespace-separated string of animation effects that are used when a new tab is shown. Options include "expand:vertical" and "fadeIn".

Default: "expand:vertical fadeIn"

<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
        animation: {
            open: {
                effects: "fadeIn"
            }
        }
    });
</script>