Wie kann ich die Animation stoppen, wenn Sie auf den Link klicken?

Question

Dort ist die Animation der Chat-Registerkarten. Beim Wechsel von der Registerkarte scheitert der Reiter, der die Animation bereits gestartet hat, aber nicht vorbei.

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

Wie die Animation in einem geschlossenen Tab zu stoppen? Das wäre bei inaktiven Tabs die Animation würde zurückgesetzt oder gestoppt werden.

Answer 1

Sie können aktuelle Animationen mit der .stop() Funktion stoppen.

In Ihrem Fall würden Sie so etwas wie:

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

Stopp nimmt in zwei optionale Argumente, die zunächst, ob die Animation Warteschlange zu löschen ist, und das zweite ist, ob alle Animationen sofort zu stoppen oder lassen sie beenden. Der Standardwert für beides ist falsch, aber Sie möchten, dass alles sofort gestoppt wird. Geben Sie also true ein. Wenn Sie möchten, dass die vorhandene Nachricht weiterhin ausgeblendet wird, übergeben Sie true einfach im ersten Parameter.

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