我有一个 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/