如何解决产品飞入购物车效果出错?

Question

var imgtodrag = $("#pic"+Product_Id);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top-10,
left: imgtodrag.offset().left+10
}).css({
'opacity': '0.8',
'position': 'absolute',
'height': '180px',
'width': '180px',
'z-index': '100'
}).appendTo($('body')).animate({
'top': cart.offset().top + 30,
'left': cart.offset().left + 30,
'width': 90,
'height': 90
}, 2000, 'easeInOutExpo');
setTimeout(function () {
cart.effect('shake', { times: 4 }, 300);
}, 2200);
imgclone.animate({
'width': 0,
'height': 0
}, function () {
$(this).detach();
//console.log("a");

});
}

});
上面是飞入购物车代码.类似https://www.17sucai.com/pins/demo-show?id=17814 点加入购物车按钮时有产品图片飞入购物车效果.正常起飞位置是产品图片所在位置.但是在热销产品滚动栏上有几个产品不是从产品图片位置起飞.而是错误的从屏幕最左侧起飞.
滚动栏热销产品是从数据库选择20个,向右滚动.但是每次当排序最后的产品出现在滚动栏上最左侧时.此产品以及它右侧的几个产品的起飞位置就会变成从错误的屏幕最左侧起飞.有没有办法解决?

Answer 1

参考GPT和自己的思路：

可能是因为在滚动热销产品栏上，产品图片的相对位置发生了偏移，导致起飞位置出错。解决方法可以参考以下步骤：

首先，需要找出相对位置偏移的原因是什么，比如是否是CSS样式冲突或者是JavaScript代码问题导致相对位置出错，然后针对问题进行调整。

其次，可以考虑在代码中加入判断，确保飞入购物车的产品图片的起飞位置始终与实际位置一致，比如在获取图片位置的时候加入判断条件。

另外，建议在代码中加入错误处理机制，比如在出现异常或者错误时，进行记录和提示，便于快速排查和解决问题。