jQuery Mobile tab slide animation

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

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<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 slide" + reverse;
    $(ui.newPanel).addClass(classes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass(classes);
    });
});