Why fadeIn(), fadeOut(), show(400), hide(400) animations doesn't work in my case?

Question

I have a div which displays the notifications a user receives, the problem is that I would like to show them with a fade in and fade out effect, respectively when the user receives the notification and clicks on it to see it.

This is the 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>

Every list item represents a friend of the user. The div id="messages_notifications_$id$"... contains the number of notifications from a particular friend of the user, the number of notifications the user didn't read yet. The $id$ is an univocal id of the friend of the user (thus 0 represents the div that contains all the notifications from a friend of the user with id = 1, and so on). I recover the number of notifications making an asynchronous call using a long polling to a server which returns a json with all the messages to the user from a particular friend. Then I use JQuery update the number of notifications to the div using the id of the friends.

Everything works great except when the notification is showed (I would like it to be showed in a fadeIn() way, but it doesn't, seems like the fadeOut() is executed but without any fade in animation, that is when there's a notification it appears immeadeately, instead of fadeIn() as I tell it) when I click on an item of the list I would like to make the div id="messages_notifications_$id$" disappear in a fadeOut() way, then I flush the notifications and mark them as read, but the fadeOut() doesn't work (again, the notifications div disappears immediately, but the most strange thing is that the fadeOut is called cause it is the only method I use to make disappear the notifications div)... I have tried even with show(1000) instead of fadeIn() and hide(1000) instead of fadeOut, but it didn't work. This is the code where the notification should be showed with a fadeIn() and when I clean up the notifications and fade out the notifications 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;
};

The notificationDiv is showed immediately. The 'notifications' var is a simple array of Plain Javscript objects (it is updated after every async request) and looks like this:

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

The counter attribute is the number of notifications from a particular friend of the user, the fromid attribute contains the id of the friend which I use to retrieve the corresponding notification div where I put the counter's notifications number with the .text(notification.couter) Jquery method.

Then when the user clicks on the list item:

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

The console.log displays the "I am fading out" and the notification div disappears, but again immediately! Why is it behaving like this? Am I messing something? Maybe when I fadeIn() the div I am in a for loop and it does not work properly? But what about the fadeOut() call, I am not in a loop there. Or perhaps is it because I have an onclick="" event on the list item? I have tried to remove it, but nothing changed. By the way that onclick jst creates a chat window recovering the messages from the server with a JSON request (I guess this doesn't matter with my fadeIn(), fadeOut() problem).

What could it be?

Thanks for the attention.

I forgot, this is the CSS of the notification divs:

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

EDIT: here is the fiddle -> http://jsfiddle.net/8WDqd. It works as expected in this example, but I am using a setInterval with static data. The code is exactly the same as the one I use except that I load the notifications with a long polling call to a webservice using the getJSON method and call the notifyUserWithNewMessages(notifications) when the request succeeds in the function(data) {} success callback of the getJSON() JQuery method. So what could it be? Is the bound to this async call?

Hope for some help!

Here is the fiddle: jsfiddle.net/8WDqd --> Just take a look at the fiddle to better understand what I would like to do. The funny thing is that in this fiddle all works great! As it should, the fadeIn() and fadeOut() work, but it doesn't on my code, which is identic to the one in the fiddle except that I call the notifyUserWithNewMessages(notifications) after a getJSON request in the function(data) {} success callback, which gives the script the updated notifications for each notification div. What do you think it could be? Might it be because of this asynchronous call? — tonix

acarlon acarlon · Accepted Answer · 2014-04-07T03:40:07

It is hard to tell since your jsfiddle works as is expected. There must be something different with your code compared to the fiddle that is causing it to happen. Calling fadeIn() in a callback shouldn't make a difference as far as I know.

Something you could try is setting a timer to call 'fadeIn' to see what difference it makes. See your updated fiddle. So, fadeIn should be called outside of the callback. Code:

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

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

Though, I think that something else is possibly going on, can we see the code that calls notifyUserWithNewMessages? Is there any other code that might be operating on that div causing it to be shown immediately? Are you able to remove code from the version that does not work until you can get it to work, e.g. stub out the ajax call, etc?

I realise that this is not an answer riding in to save the day, but it is more than I could fit and present in a comment.

Why fadeIn(), fadeOut(), show(400), hide(400) animations doesn't work in my case?

1 Answers