Question

我有一个显示用户收到的通知的div，问题是我想分别在用户收到通知并点击它以查看时显示淡入和淡出效果。< / p>

这是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 =＆＃34; messages_notifications_ $ id $＆＃34; ...包含来自用户的特定朋友的通知的数量，用户尚未阅读的通知的数量。 $ id $是用户朋友的单义ID（因此0表示包含来自id = 1的用户的朋友的所有通知的div，依此类推）。我使用长轮询向服务器恢复进行异步调用的通知的数量，该服务器从特定的朋友向用户返回带有所有消息的json。然后我使用JQuery使用朋友的id更新div的通知数量。

一切都很有效，除非显示通知（我希望它以fadeIn（）的方式显示，但它没有，似乎fadeOut（）被执行但没有任何淡入淡出的动画，那就是当有一个通知时，它会立即显示，而不是像我说的那样fadeIn（））当我点击列表中的某个项目时，我想让div id =＆＃34; messages_notifications_ $ id $＆＃34;以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。＆＃39;通知＆＃39; var是一个简单的Plain Javscript对象数组（在每次异步请求后都会更新），如下所示：

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

计数器属性是来自用户的特定朋友的通知的数量，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显示＆＃34;我正在淡出＆＃34;并且通知div消失了，但是立刻再次消失！它为什么会这样？我弄乱了什么吗？也许当我淡入（）div我在for循环中它不能正常工作？但是fadeOut（）调用呢，我不在那里循环。或者也许是因为我有一个onclick =＆＃34;＆＃34;列表项上的事件？我试图删除它，但没有任何改变。顺便说一句，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);
 }

编辑：这是小提琴 - ＆gt; http://jsfiddle.net/8WDqd。它在此示例中按预期工作，但我使用带有静态数据的setInterval。代码与我使用的代码完全相同，除了我使用getJSON方法对web服务进行长轮询调用加载通知，并在请求成功执行函数（数据）成功回调时调用notifyUserWithNewMessages（通知） getJSON（）JQuery方法。那可能是什么？是否与此异步调用绑定？

希望得到一些帮助！

Answer 1

很难说，因为你的jsfiddle正如预期的那样工作。与导致它发生的小提琴相比，你的代码必须有不同的东西。据我所知，在回调中调用fadeIn（）不应该有所作为。

你可以试试的是设置一个计时器来调用“fadeIn＆＃39;看看它有什么不同。查看更新后的 fiddle 。因此，fadeIn应该在回调之外调用。代码：

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

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

尽管如此，我认为可能会发生其他事情，我们能否看到调用notifyUserWithNewMessages的代码？是否还有其他代码可能在该div上运行，导致它立即显示？您是否能够从无法使用的版本中删除代码，直到您可以使其工作，例如发出ajax调用等等？

我意识到这不是一个挽救这一天的答案，但它超出了我能够适应并出现在评论中。

为什么fadeIn（），fadeOut（），show（400），hide（400）动画在我的情况下不起作用？

1 个答案: