jQuery Mobile tab slide animation

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<body>
	<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">Tab One</a></li>
                        <li><a href="#two">Tab Two</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>
        </div>
        <div data-role="footer">
        </div>
    </div>
</body>

JavaScript

$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
        $(ui.newPanel).addClass("in slide").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            $(this).removeClass("in slide");
        });
    });