Как остановить анимацию при клике на ссылку?

Question

Сергей Гурджиян @mrKorg

web developer

JavaScript

Как остановить анимацию при клике на ссылку?

Есть такая анимация чата в табах. При переключении с таба та таб в котором уже началась анимация, но не закончилась, происходит сбой. Как остановить анимацию в закрытом табе?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabgroup" id="first-tab-group">
  <div id="tab1" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
    </div>
  </div>
  <div id="tab2" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
    </div>
  </div>
  <div id="tab3" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
    </div>
  </div>
  <div id="tab4" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
      <div class="massage">Сообщение</div>
    </div>
  </div>

  <ul class="tabs" data-tabgroup="first-tab-group">
    <li>
      <a href="#tab1" class="active">Tab 1</a>
    </li>
    <li>
      <a href="#tab2">Tab 2</a>
    </li>
    <li>
      <a href="#tab3">Tab 3</a>
    </li>
    <li>
      <a href="#tab4">Tab 4</a>
    </li>
  </ul>
</div>