リンクをクリックするとアニメーションを停止する方法は？

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); 

停止は最初のアニメーションキューをクリアするかどうかで、2のオプション引数に取り、2番目は、すぐにすべてのアニメーションを停止したりできるようにするかどうかでありますそれらは終わる。両方のデフォルトはfalseですが、すべてをすぐに停止したいので、trueにしてください。既存のメッセージをフェードアウトし続けるには、最初のパラメータでtrueを渡します。どのように `$（ "タブA"）について

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