javascript - 为什么 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>

每个列表项代表用户的一个 friend 。div id="messages_notifications_$id$"... 包含来自用户特定 friend 的通知数量，用户尚未阅读的通知数量。 $id$ 是用户 friend 的唯一标识(因此 0 表示包含来自 id = 1 的用户 friend 的所有通知的 div，依此类推)。我恢复了使用长轮询对服务器进行异步调用的通知数量，该服务器返回一个 json，其中包含来自特定 friend 的所有消息给用户。然后我使用 JQuery 使用 friend 的 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 属性是来自用户特定 friend 的通知数量，fromid 属性包含 friend 的 id，我用它来检索相应的通知 div，我将计数器的通知数量与 .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 消失了，但又立即消失了!为什么会这样？我在搞砸什么吗？也许当我 fadeIn() 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);
 }

编辑:这是 fiddle -> http://jsfiddle.net/8WDqd .它在这个例子中按预期工作，但我使用的是带有静态数据的 setInterval。该代码与我使用的代码完全相同，只是我使用 getJSON 方法通过对 web 服务的长轮询调用加载通知，并在请求成功时调用 notifyUserWithNewMessages(notifications) function(data) {} 成功回调getJSON() JQuery 方法。那会是什么呢？绑定(bind)到这个异步调用吗？

希望得到一些帮助!

Answer 1

这很难说，因为您的 jsfiddle 按预期工作。与导致它发生的 fiddle 相比，您的代码必须有一些不同。据我所知，在回调中调用 fadeIn() 应该不会有什么不同。

您可以尝试设置一个计时器来调用“淡入”，看看它有什么不同。查看您更新的 fiddle 。所以，fadeIn应该在回调之外调用。代码:

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

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

不过，我认为可能发生了其他事情，我们可以看看调用 notifyUserWithNewMessages 的代码吗？ ？是否有任何其他代码可能正在该 div 上运行导致它立即显示？您是否能够从无法运行的版本中删除代码，直到您可以运行它，例如停止 ajax 调用等？

我意识到这不是一个挽救局面的答案，但它超出了我在评论中所能容纳和呈现的范围。