为什么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 调用等？

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