JQuery通知堆栈将逐个滑出

我想创建通知，以便在页面上保存内容或发生错误时，会出现一个通知，说明结果

HTML和JQuery都可以很好地工作，它们可以叠加在一起，因此如果3个通知同时发生，所有3个都会滑入，但当它们在5秒内淡出时，只有最上面的一个会滑出

以下是JQuery代码：

 var notificationsQueue = [];

 function createNotification(text) {
   $obj = $('<div>' + 
            '<div class="notification animated">' + 
                '<div class="notification-left-container">' + 
                    '<div class="notification-icon"></div>' + 
                '</div>' + 
                '<div class="notification-right-container">' + 
                    '<div class="notification-right-inner-container">'+text+'</div>' + 
                '</div>' + 
                '<div class="notification-clear-both"></div>' + 
            '</div>' + 
        '</div>').prependTo('#notifications_list div.notifications-pusher');

   $obj.show('slide', {
     direction: 'left'
   }, 500);

   notificationsQueue.push($obj);
 }

---

因此，每隔一秒钟，它会检查通知队列是否为空，如果不是，则弹出最后一个，并在3秒钟内滑出。上面的代码只会滑出顶部div，而不会滑出其余部分。其余部分仍在页面上。

从您的代码片段中不清楚$obj是如何定义的，但它似乎是一个全局变量。在调用第一个“hide”之前，$obj的值会被setInterval中匿名函数的多次调用重写

因此，将$obj更改为a，那么每次setTimeout中的匿名函数都会获得它自己对$obj的引用。看

setInterval(function() {
    if (notificationsQueue.length) {
        $obj = notificationsQueue.pop();


        setTimeout(function() {
            $obj.hide('slide', {
                direction: 'left'
            }, 500);
        }, 3000);

    }
}, 500);

setInterval(function() {
    if (notificationsQueue.length) {
        var $obj = notificationsQueue.pop();

        setTimeout(function() {
            $obj.hide('slide', {
                direction: 'left'
            }, 500);
        }, 3000);
    }
}, 500);