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回答中归功于Omar： Data-transition effects does not work with tab navigation jquery mobile

以下是我需要帮助的内容：当您点击左侧标签时，我希望左侧标签的内容从左侧滑入。目前，它正在向右滑入。我对Javascript不是很有经验，我在jQuery Mobile的网站上找不到任何帮助我的东西。

任何人都可以帮我修改脚本，以便在点击左侧标签时，其内容是从左侧进入的吗？

谢谢！

Answer 1

如果.index()的{{1}}大于newPanel，请检查oldPanel和.index()的{{1}} index，添加类newPanel。

oldPanel

<强> Demo

如何为jQuery Mobile标签制作动画

1 个答案: