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

Animation

configuration

A collection of visual animations used when TabStrip tab are selected through user interactions. Setting this option to false will disable all animations.

animation:true is not a valid configuration.

animation

Object|Boolean

<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: {
            // fade-out current tab over 1000 milliseconds
            close: {
                duration: 1000,
                effects: "fadeOut"
            },
           // fade-in new tab over 500 milliseconds
           open: {
               duration: 500,
               effects: "fadeIn"
           }
       }
    });
</script>

animation.close

Object

The visual animation(s) that will be used when the current tab is closed.

<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: {
            close: {
                duration: 200,
                effects: "fadeOut"
            }
        }
    });
</script>

animation.open

Object

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

<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

animation

animation.close

animation.open

Related Members