title: How to stop the animation when you click the link?
body: <p>There is the animation of the chat tabs. When switching from the tab the tab which has already started the animation, but not over, fails. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".tabgroup &gt; div, .tabgroup .massage").hide();
  $(".tabs a").click(function(e) {
    e.preventDefault();
    var $this = $(this),
      tabgroup = "#" + $this.parents(".tabs").data("tabgroup"),
      others = $this.closest("li").siblings().children("a"),
      target = $this.attr("href"),
      athersTarget = $(".tabs a").not(this).attr("href"),
      massage = $(target).find(".massage");
    others.removeClass("active");
    $this.addClass("active");
    $(tabgroup).children("div").hide().removeClass("active");
    $(tabgroup).find(".massage").hide();
    $(target).show().addClass("active");
    $(massage).each(function(i) {
      $(this).delay((i++) * 1000).show(500);
      $(".massageList, .custom-scroll_inner").animate({
        scrollTop: 9999
      }, 1000);
    });
  
  });
  // Auto show first
  $(".tabs li:first-of-type a").click();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="tabgroup" id="first-tab-group"&gt;
    &lt;div id="tab1" style="display: none;"&gt;
      &lt;div class="massageList scrollbar-inner"&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="tab2" style="display: none;"&gt;
      &lt;div class="massageList scrollbar-inner"&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="tab3" style="display: none;"&gt;
      &lt;div class="massageList scrollbar-inner"&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="tab4" style="display: none;"&gt;
      &lt;div class="massageList scrollbar-inner"&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
        &lt;div class="massage"&gt;massage&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;ul class="tabs" data-tabgroup="first-tab-group"&gt;
      &lt;li&gt;
        &lt;a href="#tab1" class="active"&gt;Tab 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#tab2"&gt;Tab 2&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#tab4"&gt; Tab 4&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to stop the animation in a closed tab?
  That would be for inactive tabs animation would be reset or stopped.</p>