Set Tab Animation

The wijtabs widget allows you to add animation for transitioning between tabs. Use the showOption and hideOption options to take advantage of this feature. See the Tabs > Animation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/tabs/Animation .

Create an C1 ASP.NET MVC 5 Web Application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page.

<div id="tabs">
      <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
      </ul>
      <div id="tabs-1">
            <p>
                  Tab 1 Content</p>
      </div>
      <div id="tabs-2">
            <p>
                  Tab 2 Content</p>
      </div>
      <div id="tabs-3">
            <p>
                  Tab 3 Content</p>
      </div>
    </div>

After the closing </div> tags you added in the previous step, enter the following jQuery script to initialize the wijtabs widget and set the showOption and hideOption options:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#tabs").wijtabs({ showOption: {
            blind: true,
            fade: true,
            duration: 1500
        },
            hideOption: {
                blind: false,
                fade: true,
                duration: 200
            }
        });
       });
      </script>

When you run the application, click the tab headers and notice how the new tab content slowly drops down and fades in. The content on the tab you are leaving quickly fades out.