Javascript 为什么fadeIn（）、fadeOut（）、show（400）、hide（400）动画不'；我的情况不行吗？

我有一个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>

counter属性是来自用户特定朋友的通知数，fromid属性包含朋友的id，我使用该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消失，但再次立即消失！为什么会这样？我是不是搞砸了什么？ 也许当我对div进行fadeIn（）时，我处于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);
 }

编辑：这是小提琴->。在本例中，它的工作原理与预期相同，但我使用的是静态数据的setInterval。该代码与我使用的代码完全相同，只是我使用getJSON方法通过对Web服务的长轮询调用加载通知，并在getJSON（）JQuery方法的函数（data）{}success回调中请求成功时调用notifyUserWithNewMessages（通知）。那会是什么呢？服务器是否绑定到此异步调用

---

希望得到一些帮助

这很难说，因为您的JSFIDLE按预期工作。与导致它发生的小提琴相比，您的代码肯定有一些不同之处。据我所知，在回调中调用fadeIn（）不会有什么不同

你可以尝试设置一个定时器来调用“fadeIn”，看看它有什么不同。查看更新的。因此，

fadeIn

应该在回调之外调用。代码：

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

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

虽然，我认为可能还有其他原因，但我们可以看到调用

notifyUserWithNewMessages

的代码吗？是否有任何其他代码可能正在该div上运行，导致它立即显示？您是否能够从版本中删除无法工作的代码，直到您可以让它工作，例如，取消ajax调用，等等

---

我意识到这并不是拯救这一天的答案，但这超出了我在评论中所能表达的范围

请提供一把小提琴这是小提琴：-->只要看一下小提琴就可以更好地理解我想做什么。有趣的是，在这把小提琴里，所有的作品都很棒！fadeIn（）和fadeOut（）应该可以工作，但它在我的代码中不起作用，这与fiddle中的代码相同，只是我在函数（data）{}success回调中的getJSON请求后调用notifyUserWithNewMessages（通知），这将为脚本提供每个通知分区的更新通知。您认为它可能是什么？可能是因为这个异步调用吗？这很奇怪，即使我这样说：对不起，我按了回车键。这很奇怪，即使我这样说：setTimeout（function（）{notificationDiv.fadeIn（10000）；}）；通知号码立即出现。关键是，我在调用Web服务后，即在.complete（）回调中调用notifyUserWithNewMessages，因为我想我需要在那里调用它，你认为呢？

.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);
 }

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

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