Jquery 选项卡在褪色前更改 animation

Question

I've wanted to do smooth transition between tabs (first fadetoggle, then change content, fadetoogle again), but "changing content" part doesn't wait for the animation to finish. Ie content changes before finishing the animation

$('.catalog__wrapper').fadeToggle('slow', executeTabChange(tab, () => $('.catalog__wrapper').fadeToggle()))

Link to jsfiddle
https://jsfiddle.net/Denchuk10111/cowypes2/34/

Answer 1

Something like this

$(document).ready(function() {
      $('ul.catalog__tabs').on('click', 'li:not(.catalog__tab_active)', function() {
        const tab = $(this);
        $('.catalog__wrapper').fadeOut('slow', () => {
            executeTabChange(tab, ()=>{
                $('.catalog__wrapper').fadeIn()
            });
        });
      });

      function executeTabChange(form, callback) {
        form
          .addClass('catalog__tab_active').siblings().removeClass('catalog__tab_active')
          .closest('body').find('div.catalog__content').removeClass('catalog__content_active')
          .eq(form.index()).addClass('catalog__content_active');
          callback();
      }

    })