title: I try to make it blink, but it won't work
body: <p>I'm trying to create notifications system in my company's ERP, similar to Facebook one. For now, after few hours of work, it looks like this:</p>
  
  <p><img src="https://i.imgur.com/aaZjj6r.png" alt="example"></p>
  
  <p>Each menu item is a <code>li</code>element. Each element can have one of classes that will modify it's background color:</p>
  
  <ul>
  <li><code>selected</code> is blue, shown on a picture</li>
  <li><code>restricted</code> is red</li>
  </ul>
  
  <p>Now, what I'm trying to achieve is to make <code>li</code> background blink on some events (when new message comes in and list is not opened (and also <code>selected</code>class is not present)).</p>
  
  <p><strong>The problem is: it won't blink. :(</strong> </p>
  
  <p>here's snap of my html (excluding messagebox)</p>
  
  <pre><code>&lt;li class="notifications-topmenu-button selected"&gt;
    &lt;a href="#"&gt;
      &lt;div class="notifications-topmenu-button-wrapper"&gt;
        &lt;div class="notifications-topmenu-button-icon"&gt;
          &lt;img class="transparent" width="13" height="13" align="absmiddle" src="/images/icons/notifications.png" title="Powiadomienia" alt="Powiadomienia"&gt;
        &lt;/div&gt;
        &lt;div class="notifications-topmenu-button-counter" style="display: block;"&gt;3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
    &lt;span class="divider"&gt; : &lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="selected"&gt;
    &lt;a href="/system_dev.php/users/profile"&gt;Strona główna&lt;/a&gt;
    &lt;span class="divider"&gt; : &lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Also, there's some JavaScript initiating object (don't mind comments):</p>
  
  <pre><code>function notificationsObject(){
    var nl = new Object();
  
    //atrybuty klasy
    nl.liElement = $('.notifications-topmenu-button');
    nl.menuButton = $('.notifications-topmenu-button-wrapper');
    nl.menuButtonCounter = nl.menuButton.find('.notifications-topmenu-button-counter');
    nl.notificationsCount = jQuery.trim(nl.menuButtonCounter.text());
    nl.notificationsList = $('.notifications-list-wrapper');
    nl.blinkingInterval = null;
  
    nl.startBlinking = function(){
      nl.blinkingInterval = setInterval(function(){
                                          if(nl.liElement.hasClass('restricted') == false){
                                            console.debug(nl.liElement.addClass('restricted'));
                                          } 
                                            else {
                                              nl.liElement.removeClass('restricted');
                                            }
                                        }, 1000);
    }
  
    nl.stopBlinking = function(){
      if(nl.blinkingInterval != null) nl.blinkingInterval = null;
    }
  
    (more 'class' functions)
  
    return nl;
  }
  </code></pre>
  
  <p>Now to test it, I simply call </p>
  
  <pre><code>$(document).ready(function(){
  
    var notifications = notificationsObject();
    notifications.startBlinking();
  
  });
  </code></pre>
  
  <p>Of course I call it after function declaration.</p>
  
  <p>funny fact is that when I change <code>nl.startBlinking</code> function <code>setInterval</code> internals to only add <code>restricted</code>class, it works. I'm pretty sure it must be some typo or stupid error, but I can't find it. </p>
  
  <p>Please, help!</p>