Question

有聊天标签的动画。从选项卡切换时，已启动动画但未结束的选项卡失败。

$(".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">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
    </div>
  </div>
  <div id="tab2" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
    </div>
  </div>
  <div id="tab3" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
    </div>
  </div>
  <div id="tab4" style="display: none;">
    <div class="massageList scrollbar-inner">
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">massage</div>
      <div class="massage">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>

如何在关闭的标签中停止动画？这将是非活动标签动画将被重置或停止。

Answer 1

您可以使用.stop(）功能停止当前动画。

在你的情况下，你会做类似的事情：

others.find(".massage").stop(true, true);

Stop接受2个可选参数，第一个是是否清除动画队列，第二个是是立即停止所有动画还是让它们完成。两者的默认值均为false，但您希望所有内容立即停止，因此传入true。如果您希望现有消息继续淡出，只需在第一个参数中传递true即可。

https://api.jquery.com/stop/

单击链接时如何停止动画？

1 个答案: