3

I would like to animate jQuery Mobile tab content. I have 2 tabs. You start on the left tab, with its content showing. When you click on the right tab, the right tab's content slides in from the right. I have this part working. 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 JSFiddle here: http://jsfiddle.net/69om1nsc/4/

And credit to Omar on this stackoverflow answer: Data-transition effects does not work with tab navigation jquery mobile

Here's what I need help with: when you click on the left tab, I would like the left tab's content to slide in from the left. Currently, it is sliding in from the right. I'm not very experienced with Javascript, and I could not find anything on jQuery Mobile's site to help me.

Can anyone help me alter the script so that when the left tab is clicked on, its content comes in from the left?

Thank you!

Community
  • 1
  • 1
stackingjasoncooper
  • 623
  • 5
  • 13

1 Answers1

3

Check the .index() of both newPanel and oldPanel, if the .index() of newPanel is greater than oldPanel's index, add 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);
    });
});

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112