我有一个 ajax 请求,我希望在重新加载页面之前完成一些 jQuery 动画。问题是我的动画函数“flyToChart”被完全忽略了,页面会立即重新加载。如果我注释掉重新加载页面的代码,动画效果很好。如何让我的动画先运行然后重新加载页面甚至重定向到另一个页面?这是我的代码:

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart(reload);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart(reload) {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));

    reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

function reload()
{
    window.location.reload();
}

最佳答案

看看下面的代码::

jQuery.ajax({
            url: 'session/phpSession.php',
            type: 'POST',
            data: {
                ProductDescription: productDescription,
                ProductPrize: productPrize,
                ProductSize: productSize,
                ProductId: productId,
                ProductCount: productListJson.length,
                ProductSmallImage: productSmallImg,
                ProductQuantity: productQuantity,
                ProductUniqueId: idGen.getId(),
                ProdId: prodId,
            },

            success: function() {
                flyToCart();
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus + " " + xhr + " " + errorThrown );
            }
        });

function flyToCart() {
    $('html, body').animate({
        'scrollTop' : $(".cart_anchor").position().top
    });

    var itemImg = $('.productBigImageContainer').find('img');
    flyToElement($(itemImg), $('.cart_anchor'));
   window.location.reload();
}

function flyToElement(flyer, flyingTo) {
    var $func = $(this);
    var divider = 3;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));
    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2;

    $(flyerClone).animate({
        opacity: 0.4,
        left: gotoX,
        top: gotoY,
        width: $(flyer).width()/divider,
        height: $(flyer).height()/divider
    }, 700,
    function () {
        $(flyingTo).fadeOut('fast', function () {
            $(flyingTo).fadeIn('fast', function () {
                $(flyerClone).fadeOut('fast', function () {
                    $(flyerClone).remove();
                });
            });
        });
    });
}

关于php - 如果存在页面重定向,则成功函数中的 jQuery ajax 函数将被忽略,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33237947/

10-09 18:38
查看更多