Question

我想在左下角创建一个类似facebook通知的通知。现在我已经成功追加了这个项目，但是我希望它在2-3秒之后褪色。像这样的东西

$('.someclass').append().fadeOut();

以下是我要添加的代码。我没有想法褪色这个

$('.notification_panel_parent').append('<div class = "panel notification_panel" id = "">'+

'<div class = "panel-body text-center">'+
'<span id = "notify_cand_name">'+data.msg.name+'</span><span> has been added</span>'+
'</div>'+
'</div>');

Answer 1

使用jQuery实现这一点应该非常简单。如果您仔细查看API，可以使用gzip方法，该方法允许您在暂停一小段时间后运行下一个方法。

在你的情况下，它将是： delay

链接到延迟方法jQuery文档：https://api.jquery.com/delay/

他们在提供的链接上也有一个示例，可以很容易地添加到您的代码中。

General Tipp： 我会使用生成器功能来完成背面的所有操作，因此您只需提供消息和消息类型（成功，错误，信息），您就可以了。

Answer 2

创建一个可以应用方法并附加该方法的jQuery对象，而不是附加字符串。然后在动画前使用delay()并删除动画回调中的元素

var $note = $('<div class = "panel notification_panel" id = "">' +
  '<div class = "panel-body text-center">' +
  '<span id = "notify_cand_name">' + data.msg.name + '</span><span> has been added</span>' +
  '</div>' +
  '</div>')

 $('.notification_panel_parent').append($note);

$note.delay(2000).fadeout(function() {
  $(this).remove()
});

如何在append（）jquery之后立即fadeOut（）？

2 个答案: