Question

我有一个ajax请求，我想在重新加载页面之前完成一些jQuery动画。问题是我的动画功能＆＃34; flyToChart＆＃34;完全被忽视，页面立即重新加载。如果我注释掉重新加载的页面代码，动画效果很好。如何让我的动画先运行，然后重新加载页面甚至重定向到另一个页面？这是我的代码：

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();
}

Answer 1

查看以下代码::

＆＃13;

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();
                });
            });
        });
    });
}

＆＃13;

Answer 2

我想通过添加.promise（）来完成如何使它工作。完成（function（）{ 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();
                });
            });
        });
    }).promise().done(function(){
        window.location.reload();
    });
}

Answer 3

请注意以下我认为导致问题的原因：

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

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

reload();
}

导致您出现问题的步骤：

您的AJAX调用的success回调调用函数flyToCart()。
该功能执行动画并重新加载页面（实际上，两者同时进行，而不是像您期望的那样）。

您的期望：

只有在动画结束后才能调用reload()函数。

实际流程：

jQuery的animate()方法的行为类似于 promise 。

使用promise可以链接不同的操作，其中每个操作都可能依赖于一个或多个其他操作的状态。状态可以是已解决或已被拒绝。

假设您有A和B行动。行动B取决于行动状态A。因此，只有B完成后才会触发操作A（已解决）。

在从您的代码中提取的摘录中，因为对reload()函数的调用不是绑定以确定动画是否已完成（即调用reload()超出范围在动画的承诺中，你最终调用reload()与animate()方法并行执行。

换句话说，在animate调用之后执行代码并不取决于animate()是否已完成执行。

解决方法：

如评论中所述，您可以使用complete方法的animate()回调：

function flyToCart(reload) { $('html, body').animate({ 'scrollTop' : $(".cart_anchor").position().top }, function(){ // the callback that is executed once the animation is over var itemImg = $('.productBigImageContainer').find('img'); flyToElement($(itemImg), $('.cart_anchor')); // move reload() to the callback of the animate in this function }); } /** your flyToElement function */ function flyToElement(flyer, flyingTo) { /* ... */ $(flyerClone).animate({ opacity: 0.4, left: gotoX, top: gotoY, width: $(flyer).width()/divider, height: $(flyer).height()/divider }, 700, function(){ /*...*/ reload(); // call reload() here });

或者，使用animate()方法返回的 promise （正如您已经做过的那样）：

$(selector).animate({ /* ... */ }).promise().done(function(){ //do some stuff when the promise is resolved. });

那是：

$(flyerClone).animate({ /* ... */ }).promise().done(function(){ reload(); });

注意： 您实际上是在代码中使用animate()两次制作动画。您需要将reload()移动到第二个animate()方法的回调中，以便等到所有动画都结束。

如果页面重定向存在，则成功函数中的jQuery ajax函数会被忽略

3 个答案: