為什么fadeIn（），fadeOut（），show（400），hide（400）動畫在我的情況下不起作用？

Question

我有一個div顯示用戶收到的通知，問題是我希望分別在用戶收到通知並點擊它以查看時顯示淡入和淡出效果。

這是HTML：

<li class="recentChatUser" onclick="createChatWindow('User',id);">
    <div class="user_data">
      <div class="foto_profilo_utenti_recenti_container">
          <img src="./userimg.jpg" class="user_photo"/>
      </div>
      <span class="userName">User name</span>
        <div id="messages_notifications_$id$" class="message_notification">0</div>
    </div>
</li>

每個列表項代表用戶的朋友。 div id =“messages_notifications_ $ id $”...包含來自用戶的特定朋友的通知的數量，用戶尚未閱讀的通知的數量。 $ id $是用戶朋友的單義ID（因此0表示包含來自id = 1的用戶的朋友的所有通知的div，依此類推）。 我使用長輪詢向服務器恢復進行異步調用的通知的數量，該服務器從特定的朋友向用戶返回帶有所有消息的json。 然后我使用JQuery使用朋友的id更新div的通知數量。

一切都很好，除非顯示通知（我希望它以fadeIn（）的方式顯示，但它沒有，似乎fadeOut（）被執行但沒有任何淡入淡出的動畫，就像有一個通知它看起來是無條件的，而不是fadeIn（），因為我告訴它）當我點擊列表中的項目我想使div id =“messages_notifications_ $ id $”以fadeOut（）方式消失，然后我沖洗通知並將它們標記為已讀，但fadeOut（）不起作用（同樣，通知div立即消失，但最奇怪的是fadeOut被調用因為它是我用來使消息通知的唯一方法div）...我甚至試過show（1000）而不是fadeIn（）和hide（1000）而不是fadeOut，但它沒有用。 這是通過fadeIn（）顯示通知的代碼，當我清理通知並淡出通知div時：

var notifyUserWithNewMessages = function(notifications) {
    for (var i = 0; i < notifications.length; i++) {
            var notification = notifications[i];
            var notificationDiv = $("#messagges_notifications_" + notification.fromid);
            notificationDiv.text(notification.counter);

            console.log(notificationDiv);
            // Showing the notification only if the list item is not selected and the notification div has display:none; 
            if (notificationDiv.css("display") == "none" &&
                    !notificationDiv.parents("li.recentChatUser").hasClass("recentChatUserActive")) {
                    notificationDiv.fadeIn(1000);
            }
    }
    return;
};

notificationDiv立即顯示。 'notifications'var是一個簡單的Plain Javscript對象數組（在每次異步請求后都會更新），如下所示：

var notifications = [{counter:num, fromid:id, read:false},
                     {counter:num, fromid:id, read:false},
                      ...];

counter屬性是來自用戶的特定朋友的通知的數量，fromid屬性包含我用來檢索相應通知div的朋友的id，其中我將計數器的通知號碼與.text（notification.couter）放在一起Jquery方法。

然后當用戶點擊列表項時：

$(".recentChatUser").on("click", function() {
            if ($(this).hasClass("recentChatUserActive")) {
                    return;
            }
            $(".recentChatUser").each(function () {
                    if ($(this).hasClass("recentChatUserActive")) {
                            $(this).removeClass("recentChatUserActive");
                            return;
                    }
            });
            $(this).addClass("recentChatUserActive");

            var notificationDiv = $(this).find(".message_notification");
            if (notificationDiv.css("display") == "block") {
                    var fromid = notificationDiv.attr("id").match(/([0-9]+)$/);
                    clearNotificationsFromUser(fromid[0]);
                    console.log("I am fading out");
                    notificationDiv.fadeOut(1000);
            }
    });

console.log顯示“我正在淡出”，通知div消失，但立即再次！ 它為什么會這樣？ 我弄亂了什么嗎？ 也許當我淡入（）div我在for循環中它不能正常工作？ 但是fadeOut（）調用呢，我不在那里循環。 或許是因為我在列表項上有一個onclick =“”事件？ 我試圖刪除它，但沒有任何改變。 順便說一句，onclick jst創建了一個聊天窗口，用JSON請求從服務器恢復消息（我想這與我的fadeIn（），fadeOut（）問題無關。

會是什么呢？

感謝您的關注。

我忘了，這是通知div的CSS：

.message_notification {
    display:none;
    color:#FFFFFF;
    text-align:center;
    position:absolute;
    top:0;
    right:0;
    height:20px;
    min-width:20px;
    background:#CC1414;
    border-radius:50%;
    text-shadow:1px 1px 0 rgba(0,0,0,.4);
 }

編輯：這里是小提琴 - > http://jsfiddle.net/8WDqd 。 它在此示例中按預期工作，但我使用帶有靜態數據的setInterval。 代碼與我使用的代碼完全相同，除了我使用getJSON方法對web服務進行長輪詢調用加載通知，並在請求成功執行函數（數據）成功回調時調用notifyUserWithNewMessages（通知） getJSON（）JQuery方法。 那可能是什么？ 綁定到這個異步調用？

希望得到一些幫助！

Answer 1

很難分辨，因為你的jsfiddle正如預期的那樣工作。 與導致它發生的小提琴相比，你的代碼必須有不同的東西。 據我所知，在回調中調用fadeIn（）不應該有所作為。

你可以試試的是設置一個計時器來調用'fadeIn'來看看它有什么不同。 看看你的更新小提琴 。 因此，應該在回調之外調用fadeIn 。 碼：

function myFadeIn(elem)
{
    elem.fadeIn(200);
}

var notifyUserWithNewMessages = function(notifications) {
    ...
    //notificationDiv.fadeIn(200);
    setTimeout(myFadeIn,10,elem);
    ...
}

雖然，我認為可能會發生其他事情，但我們能看到調用notifyUserWithNewMessages的代碼嗎？ 是否還有其他代碼可能在該div上運行，導致它立即顯示？ 您是否能夠從無法使用的版本中刪除代碼，直到您可以使其工作，例如存根ajax調用等？

我意識到這不是一個挽救這一天的答案，但它不僅僅是我能夠適應並出現在評論中。