animation Object|Boolean

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.

Example

<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.

Example

<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.close.duration Number(default: 200)

The number of milliseconds used for the visual animation when the current tab is closed.

Example

<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: 1000
            }
        }
    });
</script>

animation.close.effects String

A whitespace-delimited string of animation effects that are utilized when the current tab is closed. By default not specified - uses the opening animation with reverse.

Example

<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: 1000,
                effects: "fadeOut"
            }
        }
    });
</script>

animation.open Object

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

Example

<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(default: 200)

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

Example

<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(default: "expand:vertical fadeIn")

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

Example

<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>