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

Animation.close

configuration

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

animation.close

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

animation.close.duration

Number

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

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

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