Скорректировать Tab'ы (вкладки)

Question

Как исправить такой эффект:

Выбираем вторую вкладку.
Быстро жмем на первую затем на вторую Результатом видим, как вкладка не успевает скрыться, а ниже появляется новая. Уверен, что проблема в моем кривом jquery коде, но как его сделать правильно - не знаю..

    $('.tabs .modal_tabs').click(function(e){
        id = $(this).data('id');

        if (!$(this).hasClass('active')){

            $('.modal_tabs').removeClass('active');
            $(this).addClass('active');

            $('.modal_tab_content').fadeOut(300).removeClass('active');
            $('.modal_tab_content[data-id='+id+']').delay(320).fadeIn(200).addClass('active');

        }
    });

.modal_tabs_container{
    width: 100%;
    position: relative;
}

.tabs{
    display: flex;
    margin-top: 30px;
  
}
.tabs li{
    padding: 10px;
    background: #f1f1f1;
    transition: all .3s;
    cursor: pointer;
    position: relative;
    border-radius: 7px;
     list-style: none;
}
.tabs li:hover{
    background: #fdfdfd;
}
.tabs li.active{
    transition: all .3s;
    background: #fdfdfd;

}
.tabs li::after{
    content: "";
    display: block;
    width: 0%;
    -webkit-transition: width .3s  ease-in-out;
    -moz-transition: width .3s  ease-in-out;
    -o-transition: width .3s  ease-in-out;
    transition: width .3s ease-in-out;
}
.tabs li.active::after{

    content: "";
    display: block;
    width: calc(100% - 19px);
    height: 2px;
    background: #8bc34a;
    position: absolute;
}
.tabs li:not(:first-child){
    margin-left: 10px;
}
.modal_tabs_container .modal_tab_content{
    display: none;
    opacity: 0;

}
.modal_tab_content.active{
    opacity: 1;
}
.modal_tab_content.showed{
    display: block;
}

                <div class="modal_tabs_line">
                    <ul class="tabs">
                        <li class="modal_tabs active" data-id="1">Информация о треке</li>
                        <li class="modal_tabs" data-id="2">Opened 2</li>
                        <li class="modal_tabs" data-id="4">Opened 2</li>
                    </ul>

                </div>

<div class="modal_overlay_media_container">
                <div class="modal_tabs_container">
                    <div class="modal_tab_content  showed active" data-id="1">
                        <h4>Tab heading 1</h4>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p>
                    </div>
                    <div class="modal_tab_content" data-id="2">
                        <h4>Tab heading 2</h4>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p>
                    </div>                   <div class="modal_tab_content" data-id="4">
                        <h4>Tab heading 24</h4>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt libero ipsum, veniam magni modi exercitationem debitis ducimus assumenda ratione corporis, illum eius, laborum tempore cumque amet id perspiciatis nostrum unde?</p>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, maiores.</p>
                    </div>
                </div>
            </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Скорректировать Tab'ы (вкладки)

Ответы (0 шт):