jQuery移动同页转换

jQuery移动同页转换,jquery,jquery-mobile,Jquery,Jquery Mobile,我有一个产品的详细视图,当我在这个详细视图中时,我可以左右滑动以加载下一个或上一个产品。我希望在加载下一个项目时向右滑动动画,在加载上一个项目时向左滑动动画。它完美地加载下一个/上一个项目,但没有动画 var element = document.getElementById("product_detail_page"); var mc = new Hammer(element); mc.on("swipeleft", function (ev) { var now_index = c

我有一个产品的详细视图,当我在这个详细视图中时,我可以左右滑动以加载下一个或上一个产品。我希望在加载下一个项目时向右滑动动画,在加载上一个项目时向左滑动动画。它完美地加载下一个/上一个项目,但没有动画

 var element = document.getElementById("product_detail_page");
var mc = new Hammer(element);
mc.on("swipeleft", function (ev) {
    var now_index = current_index - 1;
    if (now_index >= 0) {
        current_index--;
        show_product(now_index, true);
    }
});
mc.on("swiperight", function (ev) {
    var now_index = current_index + 1;
    if (now_index >= 0 && now_index < products.length - 1) {
        current_index++;
        show_product(now_index, false);
    }
});


function show_product(index, rev) {
var v = products[index];
$.mobile.changePage($("#product_detail_page"), {transition: 'slide', reverse: rev });
$("#product_detail_headline").text(v.product_title);
$("#product_detail_image").attr("href", v.product_image);
$("#product_detail_image").find("img").attr("src", v.product_image);

$("#product_details_description").html(v.product_description);
$("#product_details_price_text").text(v.product_price + " €");
$("#add_to_merkliste").attr("data-id", v.product_id);

$(".merkliste_button_text").text("Zur Merkliste hinzufügen");
$("#add_to_merkliste").find("i").addClass("zmdi-star-outline").removeClass("zmdi-star").removeClass("yellow");


$.each(merkliste, function (index, value) {
    if (value.product_id == v.product_id) {
        $(".merkliste_button_text").text("Von Merkliste entfernen");
        $("#add_to_merkliste").find("i").addClass("zmdi-star").removeClass("zmdi-star-outline").addClass("yellow");
    }
});

if (localStorage.getItem("show_prices") == "off") {
    $("#product_details_price_wrapper").hide();
} else {
    $("#product_details_price_wrapper").show();
}

if (v.product_price.length < 1) {
    $("#product_details_price_wrapper").hide();
} else {
    $("#product_details_price_wrapper").show();
}
var-element=document.getElementById(“产品详细信息页面”);
var mc=新锤子(元件);
mc.on(“swipeleft”,功能(ev){
var now_index=当前_index-1;
如果(现在索引>=0){
当前_指数--;
显示产品(现在为索引,为真);
}
});
mc.on(“swiperight”,功能(ev){
var now_index=当前_index+1;
if(now_index>=0&&now_index
}试试:

$.mobile.changePage($("#product_detail_page"), {transition: 'slide', reverse: rev, allowSamePageTransition: true });
参考:

如果您使用的是jQM 1.4.x,那么您应该使用pagecontainer小部件:

$( ":mobile-pagecontainer" ).pagecontainer( "change", "#product_detail_page", { transition: 'slide', reverse: rev, allowSamePageTransition: true } );
参考: