Как оживить вкладки jQuery Mobile

Question

Я хотел бы анимировать содержимое вкладки jQuery Mobile. У меня есть 2 вкладки. Вы начинаете на левой вкладке, показывая ее содержимое. Когда вы нажимаете на правую вкладку, содержимое правой вкладки перемещается справа. У меня эта часть работает. Я использую этот скрипт для моей анимации:

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

См JSFiddle здесь: http://jsfiddle.net/69om1nsc/4/

И кредит Омаром на этом StackOverflow ответ: Data-transition effects does not work with tab navigation jquery mobile

Вот что мне нужна помощь: когда вы нажмите на левую вкладку, я бы хотел, чтобы содержимое левой вкладки скользило слева. В настоящее время он сдвигается справа. Я не очень разбираюсь в Javascript, и я не мог найти что-либо на сайте jQuery Mobile, чтобы помочь мне.

Может ли кто-нибудь помочь мне изменить скрипт так, чтобы при нажатии левой вкладки его содержимое попадало слева?

Спасибо!

Answer 1

Проверьте .index() обоих newPanel и oldPanel, если .index() из newPanel больше показателя oldPanel «s, добавить класс 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