There is such a chat animation in tabs. When switching from a tab to a tab in which the animation has already begun, but has not ended, a failure occurs. How to stop animation in a closed tab? I can not think of how to interrupt the already running setTimeout for all but the active one. What is the best method to do this? But in the browser, the animation is still repeated in a circle, it does not.

// Tabs $(".tabgroup > div, .tabgroup .massage").hide(); $(".tabs a").click(function(e) { // Tabs e.preventDefault(); var $this = $(this), tabgroup = "#" + $this.parents(".tabs").data("tabgroup"), others = $this.closest("li").siblings().children("a"), target = $this.attr("href"), massage = $(target).find(".massage"), massageLenght = massage.length, link = $(this).data("num"); others.removeClass("active"); $this.addClass("active"); $(tabgroup).children("div").hide().removeClass("active"); $(tabgroup).find(".massage").hide(); $(target).show().addClass("active"); // Massage animation $(massage).each(function(i) { $(this).delay((i++) * 1000).show(300); $(".massageList, .custom-scroll_inner").animate({ scrollTop: 9999 }, 1000); }); // Next tab var autoTab = function() { if ($this.parents("li").hasClass("last")) { $(".tabs li:first-of-type").find("a").click(); } else { $this.parents("li").next().find("a").click(); } }; setTimeout(autoTab, massageLenght * 1000); // Stop other massage animation if (target == "#tab1") { $("#tab2 .massage, #tab3 .massage, #tab4 .massage").stop(); } else if (target == "#tab2") { $("#tab1 .massage, #tab3 .massage, #tab4 .massage").stop(); } else if (target == "#tab3") { $("#tab1 .massage, #tab2 .massage, #tab4 .massage").stop(); } else if (target == "#tab4") { $("#tab1 .massage, #tab2 .massage, #tab3 .massage").stop(); } }); // 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">Tab 1 massage 1</div> <div class="massage">Tab 1 massage 2</div> <div class="massage">Tab 1 massage 3</div> <div class="massage">Tab 1 massage 4</div> </div> </div> <div id="tab2" style="display: none;"> <div class="massageList scrollbar-inner"> <div class="massage">Tab 2 massage 1</div> <div class="massage">Tab 2 massage 2</div> <div class="massage">Tab 2 massage 3</div> </div> </div> <div id="tab3" style="display: none;"> <div class="massageList scrollbar-inner"> <div class="massage">Tab 3 massage 1</div> <div class="massage">Tab 3 massage 2</div> <div class="massage">Tab 3 massage 3</div> <div class="massage">Tab 3 massage 4</div> <div class="massage">Tab 3 massage 5</div> </div> </div> <div id="tab4" style="display: none;"> <div class="massageList scrollbar-inner"> <div class="massage">Tab 4 massage 1</div> <div class="massage">Tab 4 massage 2</div> <div class="massage">Tab 4 massage 3</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>

    1 answer 1

    To abort the timeout, use clearTimeout ();

     var timeout = setTimeout(function(){}, 1000); clearTimeout(timeout);

    And I suggest instead of jquery animate () try to make a css transition.