jQuery Mobile tab slide animation

http://stackoverflow.com/a/27709095/1771795

by devangkantharia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.0/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.0/jquery.mobile.min.css">
<div data-role="page" data-theme="b">
    <div data-role="panel" data-position="right" data-display="overlay"></div>
    <div data-role="header"></div>
    <div data-role="content">
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#one" class="ui-btn-active">Tab One</a>

                    </li>
                    <li><a href="#two">Tab Two</a>

                    </li>
                    <li><a href="#three">Tab Three</a>

                    </li>
                </ul>
            </div>
            <div id="one" class="ui-body-d ui-content">Here is the content for Tab One. When you're on Tab Two, and you click on Tab One, I should slide in from left to right.</div>
            <div id="two" class="ui-body-d ui-content">Here is the content for Tab Two. I should slide in from right to left.</div>
            <div id="three" class="ui-body-d ui-content">Here is the content for Tab Two. I should slide in from right to left.</div>
        </div>
    </div>
</div>
<div data-role="footer"></div>
</div>

JavaScript

$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
    var reverse = ui.newPanel.index() < ui.oldPanel.index() ? " reverse" : "",
        classes = "in slideup" + reverse,
        classes2 = "in slidedown" + reverse;
    $(ui.newPanel).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(classes2);
    });
});