title: Uncaught TypeError: Cannot read property 'stop' of undefined
body: <p>I'm working with <code>JS</code> [<code>ES6</code>], I'm able to display notification on the go, on clicking thi <code>x</code> icon, it's disappearing just fine, but if I let it to <code>timeout</code> it throws <code>Type Error</code></p>
  
  <pre><code>Notify.js?49da:72 Uncaught TypeError: Cannot read property 'stop' of undefined
  </code></pre>
  
  <p>Here is my <code>class</code> snippet</p>
  
  <pre><code>class Notify {
      constructor() {
          this.html = '';
      }
  
      showNotification(text = 'Something went wrong!', style = 'warning'){
          //here I need to update this.html
          this.html = $(`&lt;div class="alert  alert-${style}  hide"&gt;${this.icon}  ${text} &lt;/div&gt;`);
  
          //close on click
          let vue = this;
          $('&lt;a&gt;', {
              text: '×',
              class: 'button close',
              style: 'padding-left: 10px;',
              href: '#',
              click: function (e) {
                  e.preventDefault();
                  vue.removeNotice();
              }
          }).prependTo(vue.html);
          vue.container.prepend(vue.html);
          vue.html.removeClass('hide').hide().fadeIn('slow');
          var timer = setInterval(vue.removeNotice, vue.time);
  
          $(vue.html).hover(function () {
              clearInterval(timer);
          }, function () {
              timer = setInterval(vue.removeNotice, vue.time);
          });
  
          vue.html.on('click', function () {
              clearInterval(timer);
              vue.removeNotice()
          });
  
      }
  
      removeNotice() {
          console.dir(this.html);  //this just prints empty string
          this.html.stop().fadeOut('slow').remove()  //this line throws error.
      }
  </code></pre>
  
  <p>any clue where and what I'm doing wrong?
  P.S I'm learning this stuff. and downvoter(s) please point to right direction</p>