我正在使用此功能在收藏夹中添加或删除产品。 当我从收藏夹中添加或删除产品时,会弹出一个 div 并显示一条消息。 我的队列动画有问题。
有人知道解决这个问题的方法吗?
function addFavorite(code, action) {
var website = 'http://localhost';
var cod = code;
var action = action;
var $this = $j(this);
if (action == 'removeFav') {
$j.ajax({
type: 'post',
url: '/ajax/handler.favorite.php?action=removeFav',
data: {
'cod': cod
},
beforeSend: function() {
$j('.topMessage').show();
$j('.topMessage span').html('<img src="' + website + '/assets/loader.gif" alt="loading..">');
$j('.topMessage span').animate({
top: "+=80px",
}, 500);
},
success: function(data) {
$j('.topMessage span').html(data);
$j('.topMessage span').delay(3000).animate({
top: "-=80px",
}, 500);
}
});
}
if (action == 'addFav') {
$j.ajax({
type: 'post',
url: '/ajax/handler.favorite.php?action=addFav',
data: {
'cod': cod
},
beforeSend: function() {
$j('.topMessage').show();
$j('.topMessage span').html('<img src="' + website + '/assets/loader.gif" alt="loading..">');
$j('.topMessage span').animate({
top: "+=80px",
}, 500);
},
success: function(data) {
$j('.topMessage span').html(data);
$j('.topMessage span').delay(3000).animate({
top: "-=80px",
}, 500);
}
});
}
}
最佳答案
你可以这样做: 创建一个函数来显示消息并为 div 制作动画。
function displayAddedMessage(message) {
var span = $j('.topMessage span');
var addedMessage = span.parent();
var wrapper = addedMessage.parent();
addedMessage.css('top', -85).hide();
if (message) {
span.html(message);
}
var clonedAddedMessage = addedMessage.clone(false);
addedMessage.remove();
wrapper.prepend(clonedAddedMessage);
clonedAddedMessage.show().delay(100).animate({
top: 10
}, 500).delay(3500).animate({
top: -100
}, 500);
}
您可以在以下位置使用此功能:
function addFavorite(code, action) {
var website = 'http://localhost';
var cod = code;
var action = action;
var $this = $j(this);
if (action == 'removeFav') {
$j.ajax({
type: 'post',
url: '/ajax/handler.favorite.php?action=removeFav',
data: {
'cod': cod
},
beforeSend: function() {
$j('.topMessage').show();
displayAddedMessage('<img src="' + website + '/assets/loader.gif" alt="loading..">');
},
success: function(data) {
$j('.topMessage span').html(data);
displayAddedMessage(data);
}
});
}
if (action == 'addFav') {
$j.ajax({
type: 'post',
url: '/ajax/handler.favorite.php?action=addFav',
data: {
'cod': cod
},
beforeSend: function() {
$j('.topMessage').show();
displayAddedMessage('<img src="' + website + '/assets/loader.gif" alt="loading..">');
},
success: function(data) {
$j('.topMessage span').html(data);
displayAddedMessage(data);
}
});
}
}
关于javascript - 如何停止队列动画 jquery?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24448656/