How to animate jQuery Mobile tabs
I would like to animate the content of a jQuery Mobile tab. I have 2 tabs. You start on the left tab showing its contents. When you click on the right tab, the tab on the right is displayed on the right. This part works for me. I am using this script for my animation:
$(document).on("tabsbeforeactivate", "#tabs", function (e, ui) {
$(ui.newPanel).addClass("in slide").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).removeClass("in slide");
});
});
See the JSFiddle here: http://jsfiddle.net/69om1nsc/4/
And credit to Omar for this stackoverflow answer: Data transition effects don't work with jQuery navigation for port navigation
This is where I need help: when you click on the left tab, I would like the contents of the left tab to slide to the left. It is currently shifting to the right. I am not very good with Javascript and I could not find anything on the jQuery Mobile site to help me.
Can anyone help me change the script so that when the left tab is clicked, its content falls to the left?
Thank!
source to share
Check .index()
both newPanel
, and oldPanel
if .index()
of is newPanel
greater than oldPanel
index, add the class reverse
.
$(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);
});
});
source to share